From 1575798af7a37fc5929f99aa748f2e0a5aca0cbe Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Thu, 18 Jan 2024 12:59:47 +0200
Subject: [PATCH 1/3] [sitecore-jss-nextjs] Internal link in RichText is broken
 when nested tags are added

---
 .../src/components/RichText.test.tsx          | 33 +++++++++++++++----
 .../src/components/RichText.tsx               |  4 +--
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
index 611d872534..2abac2ba25 100644
--- a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
@@ -6,12 +6,12 @@ import { NextRouter } from 'next/router';
 import { mount } from 'enzyme';
 import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 import { RichText } from './RichText';
-import { spy } from 'sinon';
+import { SinonSpy, spy } from 'sinon';
 import sinonChai from 'sinon-chai';
 
 use(sinonChai);
 
-const Router = (): NextRouter => ({
+const Router = (): { push: SinonSpy } & Omit<NextRouter, 'push'> => ({
   pathname: '/',
   route: '/',
   query: {},
@@ -47,7 +47,13 @@ describe('RichText', () => {
 
     const props = {
       field: {
-        value: '<div id="test"><h1>Hello!</h1><a href="/t10">1</a><a href="/t10">2</a></div>',
+        value: `
+        <div id="test">
+          <h1>Hello!</h1>
+          <a href="/t10">1</a>
+          <a href="/t10">2</a>
+          <a href="/contains-children"><span id="child">Title</span></a>
+        </div>`,
       },
     };
 
@@ -62,8 +68,9 @@ describe('RichText', () => {
     expect(c.html()).contains('<h1>Hello!</h1>');
     expect(c.html()).contains('<a href="/t10">1</a>');
     expect(c.html()).contains('<a href="/t10">2</a>');
+    expect(c.html()).contains('<a href="/contains-children"><span id="child">Title</span></a>');
 
-    expect(router.prefetch).callCount(1);
+    expect(router.prefetch).callCount(2);
 
     const main = document.querySelector('main');
 
@@ -71,18 +78,32 @@ describe('RichText', () => {
 
     const link1 = links && links[0];
     const link2 = links && links[1];
+    const link3 = links && links[2];
+    const innerMarkup = document.querySelector('#child') as HTMLSpanElement;
 
     expect(link1!.pathname).to.equal('/t10');
     expect(link2!.pathname).to.equal('/t10');
 
-    link1 && link1.click();
+    link1?.click();
 
     expect(router.push).callCount(1);
 
-    link2 && link2.click();
+    link2?.click();
 
     expect(router.push).callCount(2);
 
+    link3?.click();
+
+    expect(router.push).callCount(3);
+
+    // Check that when we click on link with children "router push" is called with expected pathname
+    innerMarkup?.click();
+
+    expect(router.push).callCount(4);
+    expect(router.push.getCall(3).calledWith(
+      'https://example.com/contains-children',
+    )).to.equal(true);
+
     expect(c.find(ReactRichText).length).to.equal(1);
 
     document.body.removeChild(app);
diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.tsx
index 2566a0fe62..a89a2b081a 100644
--- a/packages/sitecore-jss-nextjs/src/components/RichText.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/RichText.tsx
@@ -40,11 +40,11 @@ export const RichText = (props: RichTextProps): JSX.Element => {
   }, [hasText]);
 
   const routeHandler = (ev: MouseEvent) => {
-    if (!ev.target) return;
+    if (!ev.currentTarget) return;
 
     ev.preventDefault();
 
-    const pathname = (ev.target as HTMLAnchorElement).href;
+    const pathname = (ev.currentTarget as HTMLAnchorElement).href;
 
     router.push(pathname, pathname, { locale: false });
   };

From 059c570605821ad59591b880dff1ae78b440967d Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Thu, 18 Jan 2024 13:02:06 +0200
Subject: [PATCH 2/3] Updated CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49beed71e7..0737d27c3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
+* `[sitecore-jss-nextjs]` Internal link in RichText is broken when nested tags are added ([#1718](https://github.com/Sitecore/jss/pull/1718))
 * `[templates/node-headless-ssr-proxy]` `[node-headless-ssr-proxy]` Add sc_site qs parameter to Layout Service requests by default ([#1660](https://github.com/Sitecore/jss/pull/1660))
 * `[templates/nextjs-sxa]` Fixed Image component when there is using Banner variant which set property background-image when image is empty. ([#1689](https://github.com/Sitecore/jss/pull/1689)) ([#1692](https://github.com/Sitecore/jss/pull/1692))
 * `[templates/nextjs-sxa]` Fix feature `show Grid column` in Experience Editor. ([#1704](https://github.com/Sitecore/jss/pull/1704))

From 055babc1f412f8b566919ac5931861ac63f4e25f Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Thu, 18 Jan 2024 13:06:26 +0200
Subject: [PATCH 3/3] Fixed lint error

---
 .../sitecore-jss-nextjs/src/components/RichText.test.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
index 2abac2ba25..de0a4db97c 100644
--- a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx
@@ -100,9 +100,9 @@ describe('RichText', () => {
     innerMarkup?.click();
 
     expect(router.push).callCount(4);
-    expect(router.push.getCall(3).calledWith(
-      'https://example.com/contains-children',
-    )).to.equal(true);
+    expect(router.push.getCall(3).calledWith('https://example.com/contains-children')).to.equal(
+      true
+    );
 
     expect(c.find(ReactRichText).length).to.equal(1);