fix(ui-simple-select): ensure input value updates correctly when opti…

…ons change

packages/ui-simple-select/src/SimpleSelect/__new-tests__/SimpleSelect.test.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import '@testing-library/jest-dom'
 import SimpleSelect from '../index'
@@ -73,4 +73,64 @@ describe('<SimpleSelect />', () => {
     const input = container.querySelector('input')
     expect(input).toHaveAttribute('role', 'combobox')
   })
+
+  describe('children', () => {
+    const initialOptions: ExampleOption[] = ['foo', 'bar']
+    const updatedOptions: ExampleOption[] = ['bar', 'baz']
+
+    const getOptions = (options: string[]) =>
+      options.map((opt) => (
+        <SimpleSelect.Option id={opt} key={opt} value={opt}>
+          {opt}
+        </SimpleSelect.Option>
+      ))
+
+    const renderSimpleSelect = (options: ExampleOption[]) => {
+      return render(
+        <SimpleSelect renderLabel="Choose an option">
+          {getOptions(options)}
+        </SimpleSelect>
+      )
+    }
+
+    it('should clear selection if selected option does not exist in updated options', () => {
+      const { rerender } = renderSimpleSelect(initialOptions)
+
+      const input = screen.getByRole('combobox', { name: 'Choose an option' })
+      fireEvent.click(input)
+
+      const fooOption = screen.getByRole('option', { name: 'foo' })
+      fireEvent.click(fooOption)
+
+      expect(input).toHaveValue('foo')
+
+      rerender(
+        <SimpleSelect renderLabel="Choose an option">
+          {getOptions(updatedOptions)}
+        </SimpleSelect>
+      )
+
+      expect(input).toHaveValue('')
+    })
+
+    it('should persist selected option if it exists in updated options', () => {
+      const { rerender } = renderSimpleSelect(initialOptions)
+
+      const input = screen.getByRole('combobox', { name: 'Choose an option' })
+      fireEvent.click(input)
+
+      const barOption = screen.getByRole('option', { name: 'bar' })
+      fireEvent.click(barOption)
+
+      expect(input).toHaveValue('bar')
+
+      rerender(
+        <SimpleSelect renderLabel="Choose an option">
+          {getOptions(updatedOptions)}
+        </SimpleSelect>
+      )
+
+      expect(input).toHaveValue('bar')
+    })
+  })
 })

packages/ui-simple-select/src/SimpleSelect/index.tsx

@@ -130,7 +130,33 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     return getInteraction({ props: this.props })
   }
 
+  hasOptionsChanged(
+    prevChildren: SimpleSelectProps['children'],
+    currentChildren: SimpleSelectProps['children']
+  ) {
+    const getValues = (children: SimpleSelectProps['children']) =>
+      React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return child.props.value
+        }
+        return null
+      })
+
+    const prevValues = getValues(prevChildren)
+    const currentValues = getValues(currentChildren)
+
+    return JSON.stringify(prevValues) !== JSON.stringify(currentValues)
+  }
+
   componentDidUpdate(prevProps: SimpleSelectProps) {
+    if (this.hasOptionsChanged(prevProps.children, this.props.children)) {
+      const option = this.getOption('value', this.state.inputValue)
+      this.setState({
+        inputValue: option ? option.props.children : undefined,
+        selectedOptionId: option ? option.props.id : ''
+      })
+    }
+
     if (this.props.value !== prevProps.value) {
       let option = this.getOption('value', this.props.value)
       if (typeof this.props.value === 'undefined') {