GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix 'Cannot read property querySelector of null' bug in sidebar.

Browse Source
This commit is contained in:
Gert Hengeveld 2020-12-10 21:42:04 +01:00
parent 7e53bc8fbe
commit 28e377b2f2
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/ui/src/components/sidebar/useExpanded.ts
View File

@ -81,8 +81,7 @@ export const useExpanded = ({
); );
const getElementByDataItemId = useCallback( const getElementByDataItemId = useCallback(
(id: string) => (id: string) => containerRef.current?.querySelector(`[data-item-id="${id}"]`),
containerRef.current && containerRef.current.querySelector(`[data-item-id="${id}"]`),
[containerRef] [containerRef]
); );
@ -98,7 +97,7 @@ export const useExpanded = ({
({ ids, value }) => { ({ ids, value }) => {
setExpanded({ ids, value }); setExpanded({ ids, value });
if (ids.length === 1) { if (ids.length === 1) {
const element = containerRef.current.querySelector( const element = containerRef.current?.querySelector(
`[data-item-id="${ids[0]}"][data-ref-id="${refId}"]` `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
); );
if (element) highlightElement(element); if (element) highlightElement(element);

4
lib/ui/src/components/sidebar/useHighlighted.ts
View File

@ -67,12 +67,12 @@ export const useHighlighted = ({
const { itemId, refId } = highlight; const { itemId, refId } = highlight;
setTimeout(() => { setTimeout(() => {
scrollIntoView( scrollIntoView(
containerRef.current.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`), containerRef.current?.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
true // make sure it's clearly visible by centering it true // make sure it's clearly visible by centering it
); );
}, 0); }, 0);
} }
}, [dataset, highlightedRef, selected]); }, [dataset, highlightedRef, containerRef, selected]);
// Highlight nodes up/down the tree using arrow keys // Highlight nodes up/down the tree using arrow keys
useEffect(() => { useEffect(() => {