From a492025cbf278b2408199a5176690b7d5d061f9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 7 Sep 2022 19:36:04 +0200 Subject: [PATCH] fix(theme): preserve url ?search#hash on navbar version/locale dropdowns navigations (#8059) --- .../theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx | 5 ++++- .../theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 6 +++++- .../src/hooks/useHideableNavbar.ts | 8 +++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx index 1b4d7018308d..b6ef8e95f229 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx @@ -13,6 +13,7 @@ import { import {useDocsPreferredVersion} from '@docusaurus/theme-common'; import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal'; import {translate} from '@docusaurus/Translate'; +import {useLocation} from '@docusaurus/router'; import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem'; @@ -29,6 +30,7 @@ export default function DocsVersionDropdownNavbarItem({ dropdownItemsAfter, ...props }: Props): JSX.Element { + const {search, hash} = useLocation(); const activeDocContext = useActiveDocContext(docsPluginId); const versions = useVersions(docsPluginId); const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId); @@ -40,7 +42,8 @@ export default function DocsVersionDropdownNavbarItem({ getVersionMainDoc(version); return { label: version.label, - to: versionDoc.path, + // preserve ?search#hash suffix on version switches + to: `${versionDoc.path}${search}${hash}`, isActive: () => version === activeDocContext.activeVersion, onClick: () => savePreferredVersionName(version.name), }; diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 53f887789c3c..57cd4b72d45f 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -9,6 +9,7 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import {useAlternatePageUtils} from '@docusaurus/theme-common/internal'; import {translate} from '@docusaurus/Translate'; +import {useLocation} from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import IconLanguage from '@theme/Icon/Language'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; @@ -26,12 +27,15 @@ export default function LocaleDropdownNavbarItem({ i18n: {currentLocale, locales, localeConfigs}, } = useDocusaurusContext(); const alternatePageUtils = useAlternatePageUtils(); + const {search, hash} = useLocation(); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const to = `pathname://${alternatePageUtils.createUrl({ + const baseTo = `pathname://${alternatePageUtils.createUrl({ locale, fullyQualified: false, })}`; + // preserve ?search#hash suffix on locale switches + const to = `${baseTo}${search}${hash}`; return { label: localeConfigs[locale]!.label, lang: localeConfigs[locale]!.htmlLang, diff --git a/packages/docusaurus-theme-common/src/hooks/useHideableNavbar.ts b/packages/docusaurus-theme-common/src/hooks/useHideableNavbar.ts index 70ef84e3d10b..275652cff213 100644 --- a/packages/docusaurus-theme-common/src/hooks/useHideableNavbar.ts +++ b/packages/docusaurus-theme-common/src/hooks/useHideableNavbar.ts @@ -62,7 +62,13 @@ export function useHideableNavbar(hideOnScroll: boolean): { return; } - if (locationChangeEvent.location.hash) { + // See https://github.com/facebook/docusaurus/pull/8059#issuecomment-1239639480 + const currentHash = locationChangeEvent.location.hash; + const currentHashAnchor = currentHash + ? document.getElementById(currentHash.substring(1)) + : undefined; + + if (currentHashAnchor) { isFocusedAnchor.current = true; setIsNavbarVisible(false); return;