fix(react): correctly init options when value (or defaultValue) provided

onfido · Jul 25, 2022 · f974c5e · f974c5e
1 parent e6d6c3f
commit f974c5e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/packages/react/src/components/option-list/options-list-init.tsx b/packages/react/src/components/option-list/options-list-init.tsx
@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import { ComboboxProps } from '../combobox/combobox';
 import { CustomSelectProps } from '../select/custom';
 import { OptionListEvent } from './option-list';
 import { OptionListProvider } from './useOptionList';
@@ -8,19 +9,26 @@ export const OptionListInit = ({
   defaultValue,
   value,
   onInit,
-}: Pick<CustomSelectProps, 'children' | 'defaultValue' | 'value'> & {
+}: (
+  | Pick<ComboboxProps, 'children' | 'defaultValue' | 'value'>
+  | Pick<CustomSelectProps, 'children' | 'defaultValue' | 'value'>
+) & {
   onInit: (selected: OptionListEvent) => void;
 }) => {
   const hasInit = useRef(false);
 
+  const currentValue = value ?? defaultValue;
+
   return (
     <OptionListProvider
       value={{
-        value: value ?? defaultValue,
+        value: currentValue,
         initialize(option, value) {
           if (hasInit.current) return;
-          hasInit.current = true;
-          onInit({ option, value });
+          if (!currentValue || value === currentValue) {
+            hasInit.current = true;
+            onInit({ option, value });
+          }
         },
         select: noop,
       }}

diff --git a/packages/react/src/components/select/custom/custom-select.tsx b/packages/react/src/components/select/custom/custom-select.tsx
@@ -1,5 +1,10 @@
 import { c, classy, m, PopoverProps, SelectProps } from '@onfido/castor';
-import React, { ForwardedRef, SyntheticEvent, useState } from 'react';
+import React, {
+  ForwardedRef,
+  SyntheticEvent,
+  useCallback,
+  useState,
+} from 'react';
 import { useForwardedRef, withRef } from '../../../utils';
 import { OptionList, OptionListEvent } from '../../option-list/option-list';
 import { OptionListInit } from '../../option-list/options-list-init';
@@ -37,7 +42,17 @@ export const CustomSelect = withRef(function CustomSelect(
   ref: ForwardedRef<HTMLSelectElement>
 ) {
   const selectRef = useForwardedRef(ref);
-  const [selected, setSelected] = useState<OptionListEvent>({});
+  const [selected, _setSelected] = useState<OptionListEvent>({});
+
+  const setSelected = useCallback((selected) => {
+    _setSelected(selected);
+    // propagate `onChange` manually because <select> won't naturally when its
+    // value is changed programatically by React, and on next tick, because
+    // React needs to update its value first
+    setTimeout(() =>
+      selectRef.current?.dispatchEvent(new Event('change', { bubbles: true }))
+    );
+  }, []);
 
   const open = () => onOpenChange?.(true);
   const close = () => {
@@ -118,14 +133,6 @@ export const CustomSelect = withRef(function CustomSelect(
             onChange={(selected) => {
               setSelected(selected);
               close();
-              // propagate onChange manually because <select> won't naturally when
-              // its value is changed programatically by React, and on next tick
-              // because React needs to update its value first
-              setTimeout(() =>
-                selectRef.current?.dispatchEvent(
-                  new Event('change', { bubbles: true })
-                )
-              );
             }}
           >
             {children}