[ComboBox] Use isomorphic layout effect (#4018)

Shopify · Mar 26, 2021 · 2e6d37f · 2e6d37f
1 parent c909219
commit 2e6d37f
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
@@ -8,6 +8,7 @@ import {Popover, PopoverProps} from '../../../Popover';
 import {ActionListItemDescriptor, Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {EventListener} from '../../../EventListener';
+import {isServer} from '../../../../utilities/target';
 
 import {ComboBoxContext} from './context';
 import styles from './ComboBox.scss';
@@ -70,6 +71,8 @@ export function ComboBox({
     setFalse: forcePopoverActiveFalse,
   } = useToggle(false);
 
+  const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
+
   const id = useUniqueId('ComboBox', idProp);
 
   const getActionsWithIds = useCallback(
@@ -240,7 +243,7 @@ export function ComboBox({
     }
   }, [selected, selectedOptions]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     let newNavigableOptions: (
       | OptionDescriptor
       | ActionListItemDescriptor