diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 54741544b93..b0cc06fd1cf 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Unreleased +* Added + * Added test example for controlled form native select component. * Changed * Updated `terra-status-view - Change Variant` example component to use the apply button to change the selected variant. diff --git a/packages/terra-core-docs/src/terra-dev-site/test/form-select/native-select/ControlledSelect.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/form-select/native-select/ControlledSelect.test.jsx new file mode 100644 index 00000000000..11a4aaf38b3 --- /dev/null +++ b/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 ( +
+ 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')} + /> +
+ ); +}; + +export default ControlledSelect; diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md index 72a36111703..7631cfdeb8e 100644 --- a/packages/terra-form-select/CHANGELOG.md +++ b/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.41.0 - (May 9, 2023) diff --git a/packages/terra-form-select/src/native-select/NativeSelect.jsx b/packages/terra-form-select/src/native-select/NativeSelect.jsx index 43d978cfae3..261317d0eec 100644 --- a/packages/terra-form-select/src/native-select/NativeSelect.jsx +++ b/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,7 +202,7 @@ const NativeSelect = ({ } }; const handleOnChange = event => { - if (!refIsControlled.current) { + if (!refIsControlled) { setUncontrolledValue(event.currentTarget.value); } if (onChange) { @@ -202,7 +210,7 @@ const NativeSelect = ({ } }; - let currentValue = refIsControlled.current ? value : uncontrolledValue; + let currentValue = refIsControlled ? value : uncontrolledValue; let currentDisplay = getDisplay(currentValue, options, isFilterStyle, intl); if (!currentDisplay) { currentValue = getFirstValue(options, isFilterStyle); diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png new file mode 100644 index 00000000000..9b3f76c0ff7 Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png new file mode 100644 index 00000000000..e7ce027fb4c Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png index 70577448f36..e86c5321532 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png new file mode 100644 index 00000000000..8ee0aeab1a5 Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png new file mode 100644 index 00000000000..6fb053621c7 Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_display.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_display.png index 42145f24cba..938a0465cec 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_display.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_display.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_hover.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_hover.png index 42145f24cba..938a0465cec 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_hover.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/default_hover.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-displayed.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-displayed.png index f3bee99e48d..1f969631b59 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-displayed.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-displayed.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-hover.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-hover.png index f3bee99e48d..1f969631b59 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-hover.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/filter-style-hover.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/invalid_displayed.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/invalid_displayed.png index 42145f24cba..938a0465cec 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/invalid_displayed.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/invalid_displayed.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png index c688e974dba..91c93ff665e 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-displayed.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-hover.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-hover.png index c688e974dba..91c93ff665e 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-hover.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/native-select-spec/long-text-hover.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png new file mode 100644 index 00000000000..08737de0e48 Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-null.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png new file mode 100644 index 00000000000..73799c78e47 Binary files /dev/null and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/controlled-select-value.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_display.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_display.png index ab2741e29e6..21d50abc020 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_display.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_display.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_hover.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_hover.png index ab2741e29e6..21d50abc020 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_hover.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/default_hover.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_displayed.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_displayed.png index d9fa816c9cd..2e9e28f0d35 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_displayed.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_displayed.png differ diff --git a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_hover.png b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_hover.png index d9fa816c9cd..2e9e28f0d35 100644 Binary files a/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_hover.png and b/packages/terra-form-select/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/native-select-spec/incomplete_hover.png differ diff --git a/packages/terra-form-select/tests/wdio/native-select-spec.js b/packages/terra-form-select/tests/wdio/native-select-spec.js index b520b884d58..6cd1167177a 100644 --- a/packages/terra-form-select/tests/wdio/native-select-spec.js +++ b/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'); + }); + }); });