diff --git a/src/components/Virtualization/useSelectedTag.tsx b/src/components/Virtualization/useSelectedTag.tsx index 25eafcc9..140252fb 100644 --- a/src/components/Virtualization/useSelectedTag.tsx +++ b/src/components/Virtualization/useSelectedTag.tsx @@ -9,7 +9,8 @@ import * as React from 'react'; * transforms "#tag/myendpoint" into "tag/myendpoint". */ export const toRedocTag = (hash: string) => { - return hash.substring(1, hash.length); + const decodedHash = decodeURIComponent(hash); + return decodedHash.substring(1, decodedHash.length); }; /** @@ -24,6 +25,7 @@ const useSelectedTag = () => { React.useEffect(() => { const hashCheckInterval = setInterval(() => { const redocTag = toRedocTag(window.location.hash); + console.log(redocTag); if (redocTag !== selectedTag) { setSelectedTag(redocTag); } diff --git a/src/components/__tests__/useSelectedTag.test.tsx b/src/components/__tests__/useSelectedTag.test.tsx index e4c47f96..6548aabc 100644 --- a/src/components/__tests__/useSelectedTag.test.tsx +++ b/src/components/__tests__/useSelectedTag.test.tsx @@ -46,6 +46,29 @@ describe('useSelectedTag', () => { expect(selectedTag).toBe('tag/product-namespace-verb'); }); + it('uri encoded tags are decoded to match the tags in the actual html id and data-section-id', async () => { + window.location.hash = '#tag/Notes/paths/~1notes~1%7Bid%7D/get'; + + let selectedTag: string | undefined; + + // Hooks can only be used inside a React component. + // This component is just to host the hook. + const TestComponent = () => { + selectedTag = useSelectedTag(); + return
test
; + }; + + React.act(() => { + root.render(