@instructure/ui-simple-select 10.9.1-snapshot-0 → 10.9.1-snapshot-1

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.9.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-0) (2024-12-13)
+## [10.9.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-1) (2024-12-13)
 
-**Note:** Version bump only for package @instructure/ui-simple-select
+
+### Bug Fixes
+
+* **ui-simple-select:** fix selection getting lost after options have changed ([4e07f9a](https://github.com/instructure/instructure-ui/commit/4e07f9a5b8c7823dfcbf40273e28a448cfae59fb))
 
 
 

package/es/SimpleSelect/index.js

@@ -189,13 +189,17 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
   }
   componentDidUpdate(prevProps) {
     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 : void 0,
         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

package/lib/SimpleSelect/index.js

@@ -200,13 +200,17 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
   }
   componentDidUpdate(prevProps) {
     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 : void 0,
         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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.9.1-snapshot-0",
+  "version": "10.9.1-snapshot-1",
   "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.26.0",
-    "@instructure/console": "10.9.1-snapshot-0",
-    "@instructure/shared-types": "10.9.1-snapshot-0",
-    "@instructure/ui-form-field": "10.9.1-snapshot-0",
-    "@instructure/ui-position": "10.9.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.9.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.9.1-snapshot-0",
-    "@instructure/ui-select": "10.9.1-snapshot-0",
-    "@instructure/ui-testable": "10.9.1-snapshot-0",
+    "@instructure/console": "10.9.1-snapshot-1",
+    "@instructure/shared-types": "10.9.1-snapshot-1",
+    "@instructure/ui-form-field": "10.9.1-snapshot-1",
+    "@instructure/ui-position": "10.9.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.9.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.9.1-snapshot-1",
+    "@instructure/ui-select": "10.9.1-snapshot-1",
+    "@instructure/ui-testable": "10.9.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.9.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.9.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.9.1-snapshot-0",
-    "@instructure/ui-icons": "10.9.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.9.1-snapshot-0",
-    "@instructure/ui-utils": "10.9.1-snapshot-0",
+    "@instructure/ui-axe-check": "10.9.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.9.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.9.1-snapshot-1",
+    "@instructure/ui-icons": "10.9.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.9.1-snapshot-1",
+    "@instructure/ui-utils": "10.9.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/SimpleSelect/index.tsx

@@ -51,7 +51,7 @@ import { allowedProps, propTypes, SimpleSelectState } from './props'
 type OptionChild = React.ComponentElement<SimpleSelectOptionProps, Option>
 type GroupChild = React.ComponentElement<SimpleSelectGroupProps, Group>
 
-type GetOption = <F extends 'id' | 'value'>(
+type GetOption = <F extends keyof SimpleSelectOptionProps>(
   field: F,
   value?: SimpleSelectOptionProps[F]
 ) => OptionChild | undefined
@@ -150,14 +150,17 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
 
   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