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(
(id: string) =>
containerRef.current && containerRef.current.querySelector(`[data-item-id="${id}"]`),
(id: string) => containerRef.current?.querySelector(`[data-item-id="${id}"]`),
[containerRef]
);
@ -98,7 +97,7 @@ export const useExpanded = ({
({ ids, value }) => {
setExpanded({ ids, value });
if (ids.length === 1) {
const element = containerRef.current.querySelector(
const element = containerRef.current?.querySelector(
`[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
);
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;
setTimeout(() => {
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
);
}, 0);
}
}, [dataset, highlightedRef, selected]);
}, [dataset, highlightedRef, containerRef, selected]);
// Highlight nodes up/down the tree using arrow keys
useEffect(() => {