diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 9b7bfcb0e1..b9ff3bc178 100644 --- 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(ref as any); const textInputRef = React.useRef(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; } ),