fix(react): correctly validate selected option on select/combobox (#1850

)

packages/react/src/components/combobox/combobox.tsx

@@ -2,9 +2,9 @@ import {
   c,
   classy,
   ComboboxProps as BaseProps,
-  InputProps,
   m,
   PopoverProps,
+  SelectProps,
 } from '@onfido/castor';
 import {
   Input,
@@ -15,6 +15,7 @@ import {
 import React, {
   ForwardedRef,
   SyntheticEvent,
+  useCallback,
   useMemo,
   useRef,
   useState,
@@ -25,7 +26,7 @@ import { OptionListInit } from '../option-list/options-list-init';
 
 export interface ComboboxProps
   extends BaseProps,
-    InputProps,
+    SelectProps,
     PopoverProps,
     Omit<JSX.IntrinsicElements['input'], 'type'> {
   icon?: JSX.Element;
@@ -59,14 +60,15 @@ export const Combobox = withRef(function Combobox(
     onClick,
     onKeyUp,
     position = 'bottom',
+    required,
     selectedIcon,
     value,
     ...restProps
   }: ComboboxProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
   const inputRef = useRef<HTMLInputElement>(null);
-  const valueRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLSelectElement>(null);
   const optionsRef = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState('');
   const [search, setSearch] = useState<string>();
@@ -77,18 +79,32 @@ export const Combobox = withRef(function Combobox(
 
   const id = useMemo(() => `castor_combobox_${++idCount}`, [initialId]);
 
+  const propagateOnChange = useCallback(() => {
+    // 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 close = () => setOpen(false);
 
   return (
     <div ref={ref} className={classy(c('combobox'), m({ open }), className)}>
-      <input
-        ref={valueRef}
+      <select
+        ref={selectRef}
+        name={name}
         disabled={disabled}
+        required={required}
         hidden
-        name={name}
-        onChange={() => void 0}
-        value={selected.value || ''}
-      />
+        onChange={
+          (onChange as JSX.IntrinsicElements['select']['onChange']) ??
+          (() => void 0)
+        }
+      >
+        {!selected.value || <option hidden value={selected.value} />}
+      </select>
       <Input
         {...restProps}
         ref={inputRef}
@@ -98,6 +114,7 @@ export const Combobox = withRef(function Combobox(
         placeholder={placeholder}
         autoComplete="off"
         disabled={disabled}
+        required={required}
         onBlur={(event) => {
           if (preventBlur.current) return (preventBlur.current = false);
 
@@ -109,7 +126,6 @@ export const Combobox = withRef(function Combobox(
         onChange={(event) => {
           setInput(event.target.value);
           setSearch(event.target.value);
-          onChange?.(event);
         }}
         onClick={(event) => {
           if (!open) {
@@ -182,16 +198,9 @@ export const Combobox = withRef(function Combobox(
               setSelected(selected);
               setInput(textContent(selected.option));
               setSearch(undefined);
+              propagateOnChange();
               focus(inputRef.current);
               close();
-              // Propagate `onChange` manually because <input> won't naturally
-              // when its value is changed programatically by React, and on next
-              // tick because React needs to update its value first.
-              setTimeout(() =>
-                valueRef.current?.dispatchEvent(
-                  new Event('change', { bubbles: true })
-                )
-              );
             }}
             onKeyDown={(event) => {
               // ignore confirmation keys
@@ -232,7 +241,14 @@ export const Combobox = withRef(function Combobox(
         <OptionListInit
           defaultValue={defaultValue}
           value={value}
-          onInit={(first) => setPlaceholder(textContent(first.option))}
+          onInit={(selected) => {
+            setSelected(selected);
+            if (!selected.value) setPlaceholder(textContent(selected.option));
+            else {
+              setInput(textContent(selected.option));
+              propagateOnChange();
+            }
+          }}
         >
           {children}
         </OptionListInit>

packages/react/src/components/select/custom/custom-select.tsx

@@ -42,10 +42,9 @@ 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);
+  const propagateOnChange = useCallback(() => {
     // 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
@@ -132,6 +131,7 @@ export const CustomSelect = withRef(function CustomSelect(
             value={selected.value ?? value ?? defaultValue}
             onChange={(selected) => {
               setSelected(selected);
+              propagateOnChange();
               close();
             }}
           >
@@ -144,7 +144,12 @@ export const CustomSelect = withRef(function CustomSelect(
         <OptionListInit
           defaultValue={defaultValue}
           value={value}
-          onInit={setSelected}
+          onInit={(selected) => {
+            setSelected(selected);
+            if (selected.value) {
+              propagateOnChange();
+            }
+          }}
         >
           {children}
         </OptionListInit>