From f27b60565f3cccc502670e981870968514908555 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 3 Apr 2024 15:11:33 -0600 Subject: [PATCH 1/5] fix: Pass value to visual input in select --- modules/react/select/lib/hooks/useSelectInput.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 9b7bfcb0e1..8bb509a571 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -19,7 +19,7 @@ import {useSelectModel} from './useSelectModel'; */ 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); @@ -130,6 +130,9 @@ export const useSelectInput = composeHooks( }, textInputProps: { ref: textInputRef, + value: elemProps.value + ? model.navigation.getItem(model.state.selectedIds[0], model).textValue + : undefined, }, ref: elementRef, From 99220f7dfcc0bb11046d85c99bdc63a35161e6aa Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 3 Apr 2024 16:31:32 -0600 Subject: [PATCH 2/5] fix: Update select --- modules/react/select/lib/hooks/useSelectInput.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 8bb509a571..0880a6006c 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -30,6 +30,7 @@ export const useSelectInput = composeHooks( Object.getPrototypeOf(textInputRef.current), 'value' ); + if (nativeInputValue && nativeInputValue.set) { nativeInputValue.set.call(textInputRef.current, value); } @@ -54,15 +55,21 @@ export const useSelectInput = composeHooks( model.state.selectedIds[0] ) { const value = model.navigation.getItem(model.state.selectedIds[0], model).id; + // console.log('in useeffect', value); + if ( model.state.selectedIds[0] !== value && model.state.inputRef.current.value !== value ) { + console.log(' in here >>>>>>'); + // elemProps.value = value; // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server. dispatchInputEvent(model.state.inputRef.current, value); } } if (!model.state.selectedIds[0] && textInputRef.current?.value) { + console.log(' in here'); + dispatchInputEvent(textInputRef.current, ''); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -93,6 +100,7 @@ export const useSelectInput = composeHooks( // we only want to run this effect if the cursor, visibility and selectedIds change and not any other time // eslint-disable-next-line react-hooks/exhaustive-deps }, [model.state.cursorId, model.state.selectedIds, model.state.visibility]); + console.log(textInputRef.current); return { onKeyDown(event: React.KeyboardEvent) { @@ -131,6 +139,8 @@ export const useSelectInput = composeHooks( textInputProps: { ref: textInputRef, value: elemProps.value + ? model.navigation.getItem(model.state.selectedIds[0], model).textValue + : model.state.selectedIds.length > 0 && model.state.items.length > 0 ? model.navigation.getItem(model.state.selectedIds[0], model).textValue : undefined, }, @@ -139,8 +149,7 @@ export const useSelectInput = composeHooks( // 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 + ? model.navigation.getItem(model.state.selectedIds[0], model).textValue : undefined, } as const; } From c66adc26a4d7358cb3f262581d99fe72ee1bc4cb Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 3 Apr 2024 16:33:49 -0600 Subject: [PATCH 3/5] fix: Remove consoles --- modules/react/select/lib/hooks/useSelectInput.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 0880a6006c..71f5f1e0f6 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -55,21 +55,16 @@ export const useSelectInput = composeHooks( model.state.selectedIds[0] ) { const value = model.navigation.getItem(model.state.selectedIds[0], model).id; - // console.log('in useeffect', value); if ( model.state.selectedIds[0] !== value && model.state.inputRef.current.value !== value ) { - console.log(' in here >>>>>>'); - // elemProps.value = value; // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server. dispatchInputEvent(model.state.inputRef.current, value); } } if (!model.state.selectedIds[0] && textInputRef.current?.value) { - console.log(' in here'); - dispatchInputEvent(textInputRef.current, ''); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -100,7 +95,6 @@ export const useSelectInput = composeHooks( // we only want to run this effect if the cursor, visibility and selectedIds change and not any other time // eslint-disable-next-line react-hooks/exhaustive-deps }, [model.state.cursorId, model.state.selectedIds, model.state.visibility]); - console.log(textInputRef.current); return { onKeyDown(event: React.KeyboardEvent) { From 181cf56aa4fab55c69b15d42a70410b90a17f121 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 3 Apr 2024 16:35:43 -0600 Subject: [PATCH 4/5] fix: Add logic back in --- modules/react/select/lib/hooks/useSelectInput.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 71f5f1e0f6..8c5387dee8 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -143,7 +143,8 @@ export const useSelectInput = composeHooks( // 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.navigation.getItem(model.state.selectedIds[0], model).textValue || + model.state.value : undefined, } as const; } From 171a0b322ae98afc85228bab4d6bfc3a4a4115d8 Mon Sep 17 00:00:00 2001 From: Nicholas Boll Date: Tue, 9 Apr 2024 15:04:05 -0600 Subject: [PATCH 5/5] Simplified logic --- .../react/select/lib/hooks/useSelectInput.ts | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 8c5387dee8..b9ff3bc178 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -14,6 +14,10 @@ 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/). */ @@ -56,6 +60,18 @@ export const useSelectInput = composeHooks( ) { 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 @@ -132,20 +148,13 @@ export const useSelectInput = composeHooks( }, textInputProps: { ref: textInputRef, - value: elemProps.value - ? model.navigation.getItem(model.state.selectedIds[0], model).textValue - : model.state.selectedIds.length > 0 && model.state.items.length > 0 - ? model.navigation.getItem(model.state.selectedIds[0], model).textValue - : undefined, + 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; } ),