From f0e134a68bd6fec86ce3cbd4871e110499557719 Mon Sep 17 00:00:00 2001
From: destruc7i0n <6181960+destruc7i0n@users.noreply.github.com>
Date: Wed, 7 Jul 2021 16:54:56 -0400
Subject: [PATCH] Fix hash change events not firing with i18n (#26994)

My last PR (#26205) made the hash change events not fire when in i18n was enabled, as seen in #26853. This PR fixes that and adds a test for this case.

fixes #26853

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
---
 packages/next/shared/lib/router/router.ts     |  4 +++-
 .../pages/about.js                            | 23 +++++++++++++++++++
 .../test/index.test.js                        | 13 +++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts
index babffab9d11eb..e403f3239a0ba 100644
--- a/packages/next/shared/lib/router/router.ts
+++ b/packages/next/shared/lib/router/router.ts
@@ -817,7 +817,7 @@ export default class Router implements BaseRouter {
       this.isReady = true
     }
 
-    let localeChange = options.locale !== this.locale
+    const prevLocale = this.locale
 
     if (process.env.__NEXT_I18N_SUPPORT) {
       this.locale =
@@ -927,6 +927,8 @@ export default class Router implements BaseRouter {
     )
     this._inFlightRoute = as
 
+    let localeChange = prevLocale !== this.locale
+
     // If the url change is only related to a hash change
     // We should not proceed. We should only change the state.
 
diff --git a/test/integration/i18n-support-same-page-hash-change/pages/about.js b/test/integration/i18n-support-same-page-hash-change/pages/about.js
index 20de96ca7b506..bc0d213c9e7b9 100644
--- a/test/integration/i18n-support-same-page-hash-change/pages/about.js
+++ b/test/integration/i18n-support-same-page-hash-change/pages/about.js
@@ -1,9 +1,29 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
+  useEffect(() => {
+    window.hashChangeStart = 'no'
+    window.hashChangeComplete = 'no'
+    const hashChangeStart = () => {
+      window.hashChangeStart = 'yes'
+    }
+    const hashChangeComplete = () => {
+      window.hashChangeComplete = 'yes'
+    }
+
+    router.events.on('hashChangeStart', hashChangeStart)
+    router.events.on('hashChangeComplete', hashChangeComplete)
+
+    return () => {
+      router.events.off('hashChangeStart', hashChangeStart)
+      router.events.off('hashChangeComplete', hashChangeComplete)
+    }
+  }, [router.events])
+
   return (
     <>
       <p id="props-locale">{props.locale}</p>
@@ -14,6 +34,9 @@ export default function Page(props) {
       >
         <a id="change-locale">Change Locale</a>
       </Link>
+      <Link href={{ hash: '#newhash' }}>
+        <a id="hash-change">Hash Change</a>
+      </Link>
     </>
   )
 }
diff --git a/test/integration/i18n-support-same-page-hash-change/test/index.test.js b/test/integration/i18n-support-same-page-hash-change/test/index.test.js
index a9693372fba58..cdb186077412a 100644
--- a/test/integration/i18n-support-same-page-hash-change/test/index.test.js
+++ b/test/integration/i18n-support-same-page-hash-change/test/index.test.js
@@ -57,6 +57,19 @@ const runTests = () => {
     expect(await browser.elementByCss('#router-locale').text()).toBe('en')
     expect(await browser.elementByCss('#props-locale').text()).toBe('en')
   })
+
+  it('should trigger hash change events', async () => {
+    const browser = await webdriver(appPort, `/about#hash`)
+
+    await check(() => browser.eval('window.location.hash'), '#hash')
+
+    await browser.elementByCss('#hash-change').click()
+
+    await check(() => browser.eval('window.hashChangeStart'), 'yes')
+    await check(() => browser.eval('window.hashChangeComplete'), 'yes')
+
+    await check(() => browser.eval('window.location.hash'), '#newhash')
+  })
 }
 
 describe('Hash changes i18n', () => {