fix: Pass value to visual input in select (#2676)

`value` was not passed to the underlying select input. Consumers would pass `value` but it wasn't working. This change passes the value to the input so consumers can control it and the visual input would reflect it.. [category:Components] Co-authored-by: manuel.carrera <[email protected]> Co-authored-by: @NicholasBoll <[email protected]>
Workday · Apr 9, 2024 · a12bd0e · a12bd0e
1 parent ce4adec
commit a12bd0e
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -14,12 +14,16 @@ import {
 } from '@workday/canvas-kit-react/combobox';
 import {useSelectModel} from './useSelectModel';
 
+function noop() {
+  // Do nothing
+}
+
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(
   createElemPropsHook(useSelectModel)(
-    (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
+    (model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
       const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
       const textInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -30,6 +34,7 @@ export const useSelectInput = composeHooks(
           Object.getPrototypeOf(textInputRef.current),
           'value'
         );
+
         if (nativeInputValue && nativeInputValue.set) {
           nativeInputValue.set.call(textInputRef.current, value);
         }
@@ -54,6 +59,19 @@ export const useSelectInput = composeHooks(
           model.state.selectedIds[0]
         ) {
           const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+
+          // force the hidden input to have the correct value
+          if (model.state.inputRef.current.value !== value) {
+            const nativeInputValue = Object.getOwnPropertyDescriptor(
+              Object.getPrototypeOf(model.state.inputRef.current),
+              'value'
+            );
+
+            if (nativeInputValue && nativeInputValue.set) {
+              nativeInputValue.set.call(model.state.inputRef.current, value);
+            }
+          }
+
           if (
             model.state.selectedIds[0] !== value &&
             model.state.inputRef.current.value !== value
@@ -130,15 +148,13 @@ export const useSelectInput = composeHooks(
         },
         textInputProps: {
           ref: textInputRef,
+          onChange: noop,
+          value:
+            model.state.selectedIds.length > 0 && model.state.items.length > 0
+              ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
+              : '',
         },
         ref: elementRef,
-
-        // Account for the case where an initial item is selected when the Select first renders
-        defaultValue:
-          model.state.selectedIds.length > 0 && model.state.items.length > 0
-            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
-              model.state.value
-            : undefined,
       } as const;
     }
   ),