[terra-form-select] Native Select allow initial values (#3829)

* Update: Native Select allow initial values

* Updated change log files

* Update: wdio screenshots update

* Update: Removed the usage of state varaible

* Updated change log file- addressed review comment

* Update: Added expect statement in testcase- review comment

* WDIO Snapshots Update

* Updating useEffect documentation

---------

Co-authored-by: Shalini <[email protected]>
Co-authored-by: Akshar <[email protected]>

packages/terra-core-docs/CHANGELOG.md

@@ -4,6 +4,8 @@
   * Added documentation updates for `Single Select` in `terra-form-select`.
 
 ## Unreleased
+* Added
+  * Added test example for controlled form native select component.
 
 ## 1.29.0 - (June 28, 2023)
 

packages/terra-core-docs/src/terra-dev-site/test/form-select/native-select/ControlledSelect.test.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import classNames from 'classnames/bind';
+import NativeSelect from 'terra-form-select/lib/native-select/NativeSelect';
+import Button from 'terra-button';
+import styles from './NativeSelectTest.module.scss';
+
+const cx = classNames.bind(styles);
+
+const ControlledSelect = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <div className={cx('test-shell')}>
+      <NativeSelect
+        ariaLabel="Controlled Select Example"
+        id="test-select-id"
+        onChange={event => setValue(event.currentTarget.value)}
+        options={[
+          { value: 'volvo', display: 'Volvo' },
+          { value: 'saab', display: 'Saab' },
+          { value: 'mercedes', display: 'Mercedes' },
+          { value: 'audi', display: 'Audi' },
+        ]}
+        value={value}
+        className={cx('form-select')}
+      />
+      <Button id="test-button-id" text="Set Mercedes" onClick={() => setValue('mercedes')} />
+    </div>
+  );
+};
+
+export default ControlledSelect;

packages/terra-form-select/CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ## Unreleased
+* Fixed
+  * Fixed `Native Select` to allow updating the value prop in subsequent renders.
 
 ## 6.42.0 - (June 28, 2023)
 

packages/terra-form-select/src/native-select/NativeSelect.jsx

@@ -1,6 +1,7 @@
 import React, {
   useState,
   useRef,
+  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -167,9 +168,16 @@ const NativeSelect = ({
   ...customProps
 }) => {
   const [uncontrolledValue, setUncontrolledValue] = useState(!isValuePresent(value) ? defaultValue || getFirstValue(options, isFilterStyle) : undefined);
-  const refIsControlled = useRef(isValuePresent(value));
   const refSelect = useRef();
   const theme = React.useContext(ThemeContext);
+  const refIsControlled = isValuePresent(value);
+
+  useEffect(() => {
+    // setting the uncontrolledValue to empty string whenever the value prop changes
+    if (value) {
+      setUncontrolledValue('');
+    }
+  }, [value]);
 
   // The native select's presentation is masked to allow for better customization of the inputs display.
   // In order to facilitate this, the mouseDown, blur, and focus events need to be mapped mapped to the mask.
@@ -194,15 +202,15 @@ const NativeSelect = ({
     }
   };
   const handleOnChange = event => {
-    if (!refIsControlled.current) {
+    if (!refIsControlled) {
       setUncontrolledValue(event.currentTarget.value);
     }
     if (onChange) {
       onChange(event);
     }
   };
 
-  let currentValue = refIsControlled.current ? value : uncontrolledValue;
+  let currentValue = refIsControlled ? value : uncontrolledValue;
   let currentDisplay = getDisplay(currentValue, options, isFilterStyle, intl);
   if (!currentDisplay) {
     currentValue = getFirstValue(options, isFilterStyle);

packages/terra-form-select/tests/wdio/native-select-spec.js

@@ -187,4 +187,19 @@ Terra.describeViewports('Native Select', ['tiny'], () => {
       Terra.validates.element('filter-style-hover-and-focus');
     });
   });
+
+  describe('Controlled Select', () => {
+    before(() => browser.url('/raw/tests/cerner-terra-core-docs/form-select/native-select/controlled-select'));
+
+    it('native select with null value', () => {
+      Terra.validates.element('controlled-select-null');
+    });
+
+    it('should set Mercedes value on click', () => {
+      $('#test-button-id').click();
+      expect($('#test-select-id').getAttribute('value')).toEqual('mercedes');
+
+      Terra.validates.element('controlled-select-value');
+    });
+  });
 });