fix: change the fix to render the entire select on mount

twilio-labs · Oct 13, 2023 · 93f167c · 93f167c
1 parent c74c43b
commit 93f167c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/.changeset/thirty-forks-poke.md b/.changeset/thirty-forks-poke.md
@@ -3,4 +3,4 @@
 "@twilio-paste/core": patch
 ---
 
-[Select] fix the behaviour of `defaultValue` by removing the rehydration useEffect trick to stop a SSR mismatch. By only rendering the child options on mount via an effect it prevents `defaultValue` from selecting the default value. We will look for other ways of dealing with rehydration mismatches
+[Select] fix the behaviour of `defaultValue` by tweaking the rehydration useEffect trick, to stop a SSR mismatch. By only rendering the child options on mount via an effect it prevents `defaultValue` from selecting the default value. We moved to rendering the entire Select element on mount to prevent SSR mismatch, and rendering a placeholder select to prevent layout shift.
diff --git a/packages/paste-core/components/select/src/Select.tsx b/packages/paste-core/components/select/src/Select.tsx
@@ -82,6 +82,11 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     },
     ref,
   ) => {
+    const [showOptions, setShowOptions] = React.useState(false);
+    React.useEffect(() => {
+      setShowOptions(true);
+    }, []);
+
     return (
       <InputBox
         disabled={disabled}
@@ -92,19 +97,24 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         variant={variant}
       >
         <Box display="flex" width="100%" position="relative">
-          <SelectElement
-            aria-invalid={hasError}
-            data-not-selectize="true"
-            disabled={disabled}
-            ref={ref}
-            element={`${element}_ELEMENT`}
-            {...props}
-            multiple={multiple}
-            size={multiple ? size : 0}
-            variant={variant}
-          >
-            {children}
-          </SelectElement>
+          {showOptions ? (
+            <SelectElement
+              aria-invalid={hasError}
+              data-not-selectize="true"
+              disabled={disabled}
+              ref={ref}
+              element={`${element}_ELEMENT`}
+              {...props}
+              multiple={multiple}
+              size={multiple ? size : 0}
+              variant={variant}
+              key={props.id}
+            >
+              {children}
+            </SelectElement>
+          ) : (
+            <SelectElement>{}</SelectElement>
+          )}
           {!multiple && (
             <InputChevronWrapper element={`${element}_CHEVRON_WRAPPER`}>
               <ChevronDownIcon