From 2e6d37fe4fae0d211482eafb09d3660bb62fa14a Mon Sep 17 00:00:00 2001
From: Dominic McPhee <dominic.mcphee@shopify.com>
Date: Wed, 24 Feb 2021 14:58:37 -0500
Subject: [PATCH] [ComboBox] Use isomorphic layout effect (#4018)

---
 src/components/Autocomplete/components/ComboBox/ComboBox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
index cb05a174421..789de094b52 100644
--- 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