@instructure/ui-simple-select 10.2.3-snapshot-5 → 10.2.3-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-5) (2024-09-24)
+## [10.2.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-7) (2024-09-27)
 
-**Note:** Version bump only for package @instructure/ui-simple-select
+
+### Bug Fixes
+
+* **ui-simple-select:** ensure input value updates correctly when options change ([4dc7cb2](https://github.com/instructure/instructure-ui/commit/4dc7cb2cfde69d28baaaced32a5e63aea9a48ee1))
 
 
 

package/es/SimpleSelect/__new-tests__/SimpleSelect.test.js

@@ -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';
@@ -63,4 +63,52 @@ describe('<SimpleSelect />', () => {
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
+  describe('children', () => {
+    const initialOptions = ['foo', 'bar'];
+    const updatedOptions = ['bar', 'baz'];
+    const getOptions = options => options.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: opt,
+      key: opt,
+      value: opt
+    }, opt));
+    const renderSimpleSelect = options => {
+      return render( /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(options)));
+    };
+    it('should clear selection if selected option does not exist in updated options', () => {
+      const _renderSimpleSelect = renderSimpleSelect(initialOptions),
+        rerender = _renderSimpleSelect.rerender;
+      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( /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
+      expect(input).toHaveValue('');
+    });
+    it('should persist selected option if it exists in updated options', () => {
+      const _renderSimpleSelect2 = renderSimpleSelect(initialOptions),
+        rerender = _renderSimpleSelect2.rerender;
+      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( /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
+      expect(input).toHaveValue('bar');
+    });
+  });
 });

package/es/SimpleSelect/index.js

@@ -176,7 +176,25 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       props: this.props
     });
   }
+  hasOptionsChanged(prevChildren, currentChildren) {
+    const getValues = children => React.Children.map(children, child => {
+      if ( /*#__PURE__*/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) {
+    if (this.hasOptionsChanged(prevProps.children, this.props.children)) {
+      const option = this.getOption('value', this.state.inputValue);
+      this.setState({
+        inputValue: option ? option.props.children : void 0,
+        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') {

package/lib/SimpleSelect/__new-tests__/SimpleSelect.test.js

@@ -68,4 +68,52 @@ describe('<SimpleSelect />', () => {
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
+  describe('children', () => {
+    const initialOptions = ['foo', 'bar'];
+    const updatedOptions = ['bar', 'baz'];
+    const getOptions = options => options.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: opt,
+      key: opt,
+      value: opt
+    }, opt));
+    const renderSimpleSelect = options => {
+      return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(options)));
+    };
+    it('should clear selection if selected option does not exist in updated options', () => {
+      const _renderSimpleSelect = renderSimpleSelect(initialOptions),
+        rerender = _renderSimpleSelect.rerender;
+      const input = _react2.screen.getByRole('combobox', {
+        name: 'Choose an option'
+      });
+      _react2.fireEvent.click(input);
+      const fooOption = _react2.screen.getByRole('option', {
+        name: 'foo'
+      });
+      _react2.fireEvent.click(fooOption);
+      expect(input).toHaveValue('foo');
+      rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
+      expect(input).toHaveValue('');
+    });
+    it('should persist selected option if it exists in updated options', () => {
+      const _renderSimpleSelect2 = renderSimpleSelect(initialOptions),
+        rerender = _renderSimpleSelect2.rerender;
+      const input = _react2.screen.getByRole('combobox', {
+        name: 'Choose an option'
+      });
+      _react2.fireEvent.click(input);
+      const barOption = _react2.screen.getByRole('option', {
+        name: 'bar'
+      });
+      _react2.fireEvent.click(barOption);
+      expect(input).toHaveValue('bar');
+      rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
+      expect(input).toHaveValue('bar');
+    });
+  });
 });

package/lib/SimpleSelect/index.js

@@ -187,7 +187,25 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       props: this.props
     });
   }
+  hasOptionsChanged(prevChildren, currentChildren) {
+    const getValues = children => _react.default.Children.map(children, child => {
+      if ( /*#__PURE__*/_react.default.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) {
+    if (this.hasOptionsChanged(prevProps.children, this.props.children)) {
+      const option = this.getOption('value', this.state.inputValue);
+      this.setState({
+        inputValue: option ? option.props.children : void 0,
+        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') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.2.3-snapshot-5",
+  "version": "10.2.3-snapshot-7",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-5",
-    "@instructure/shared-types": "10.2.3-snapshot-5",
-    "@instructure/ui-form-field": "10.2.3-snapshot-5",
-    "@instructure/ui-position": "10.2.3-snapshot-5",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-5",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-5",
-    "@instructure/ui-select": "10.2.3-snapshot-5",
-    "@instructure/ui-testable": "10.2.3-snapshot-5",
+    "@instructure/console": "10.2.3-snapshot-7",
+    "@instructure/shared-types": "10.2.3-snapshot-7",
+    "@instructure/ui-form-field": "10.2.3-snapshot-7",
+    "@instructure/ui-position": "10.2.3-snapshot-7",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-7",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-7",
+    "@instructure/ui-select": "10.2.3-snapshot-7",
+    "@instructure/ui-testable": "10.2.3-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-5",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-5",
-    "@instructure/ui-icons": "10.2.3-snapshot-5",
-    "@instructure/ui-test-locator": "10.2.3-snapshot-5",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-5",
-    "@instructure/ui-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-7",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-7",
+    "@instructure/ui-icons": "10.2.3-snapshot-7",
+    "@instructure/ui-test-locator": "10.2.3-snapshot-7",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-7",
+    "@instructure/ui-utils": "10.2.3-snapshot-7",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "vitest": "^2.0.2"

package/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')
+    })
+  })
 })

package/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') {