From 4e07f9a5b8c7823dfcbf40273e28a448cfae59fb Mon Sep 17 00:00:00 2001 From: Matyas Szabo Date: Wed, 11 Dec 2024 09:58:46 +0100 Subject: [PATCH] fix(ui-simple-select): fix selection getting lost after options have changed Closes: INSTUI-4402 This issue came up when the Option's value and children differed. TEST PLAN: make a SimpleSelect where the Option's value and children are not the same. Select a child and remove a different element from the child list. Selection should stay --- packages/ui-simple-select/src/SimpleSelect/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/ui-simple-select/src/SimpleSelect/index.tsx b/packages/ui-simple-select/src/SimpleSelect/index.tsx index e1f0841d31..dcfad246cc 100644 --- a/packages/ui-simple-select/src/SimpleSelect/index.tsx +++ b/packages/ui-simple-select/src/SimpleSelect/index.tsx @@ -51,7 +51,7 @@ import { allowedProps, propTypes, SimpleSelectState } from './props' type OptionChild = React.ComponentElement type GroupChild = React.ComponentElement -type GetOption = ( +type GetOption = ( field: F, value?: SimpleSelectOptionProps[F] ) => OptionChild | undefined @@ -150,14 +150,17 @@ class SimpleSelect extends Component { componentDidUpdate(prevProps: SimpleSelectProps) { if (this.hasOptionsChanged(prevProps.children, this.props.children)) { - const option = this.getOption('value', this.state.inputValue) + // Compare current input value to children's child prop, this is put into + // state.inputValue + const option = this.getOption('children', this.state.inputValue) this.setState({ inputValue: option ? option.props.children : undefined, selectedOptionId: option ? option.props.id : '' }) } - if (this.props.value !== prevProps.value) { + // if value has changed externally try to find an option with the same value + // and select it let option = this.getOption('value', this.props.value) if (typeof this.props.value === 'undefined') { // preserve current value when changing from controlled to uncontrolled