[terra-form-select] Fix Search field value clears out issue (#4103)

cerner · May 24, 2024 · a32dc9a · a32dc9a
1 parent fd88a8d
commit a32dc9a
Show file tree

Hide file tree

Showing 16 changed files with 33 additions and 5 deletions.
diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md
@@ -2,12 +2,14 @@
 
 ## Unreleased
 
+* Fixed
+  * Search field value now persists when navigating to another component.
+
 ## 6.62.1 - (May 13, 2024)
 
 * Fixed
   * Fixed a "prop not recognized" console error.
 
-
 ## 6.62.0 - (May 8, 2024)
 
 * Added

diff --git a/packages/terra-form-select/src/search/Frame.jsx b/packages/terra-form-select/src/search/Frame.jsx
@@ -232,10 +232,9 @@ class Frame extends React.Component {
     this.setState({ isFocused: false, focusedByTouch: false });
 
     if (this.state.hasSearchChanged) {
-      this.setState({
-        searchValue: this.props.display,
-        hasSearchChanged: false,
-      });
+      this.setState((prevState) => ({
+        searchValue: prevState.searchValue.trim(),
+      }));
     }
 
     this.closeDropdown();

diff --git a/...owlight-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png b/...owlight-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png
diff --git a/...e/clinical-lowlight-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png b/...e/clinical-lowlight-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png
diff --git a/...cal-lowlight-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png b/...cal-lowlight-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png
diff --git a/...orion-fusion-theme/en/chrome_tiny/select-spec/search_does_not_open_on_enter.png b/...orion-fusion-theme/en/chrome_tiny/select-spec/search_does_not_open_on_enter.png
diff --git a/...-fusion-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png b/...-fusion-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png
diff --git a/...erence/orion-fusion-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png b/...erence/orion-fusion-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png
diff --git a/...orion-fusion-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png b/...orion-fusion-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png
diff --git a/.../en/chrome_tiny/select-spec/search_close_on_outside_click_after_toggle_open.png b/.../en/chrome_tiny/select-spec/search_close_on_outside_click_after_toggle_open.png
diff --git a/...-theme/en/chrome_tiny/select-spec/search_closes_dropdown_after_clicking_off.png b/...-theme/en/chrome_tiny/select-spec/search_closes_dropdown_after_clicking_off.png
diff --git a/...erra-default-theme/en/chrome_tiny/select-spec/search_does_not_open_on_enter.png b/...erra-default-theme/en/chrome_tiny/select-spec/search_does_not_open_on_enter.png
diff --git a/...default-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png b/...default-theme/en/chrome_tiny/select-spec/search_open_dropdown_by_down_arrow.png
diff --git a/...rence/terra-default-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png b/...rence/terra-default-theme/en/chrome_tiny/select-spec/search_opened-dropdown.png
diff --git a/...erra-default-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png b/...erra-default-theme/en/chrome_tiny/select-spec/search_toggle-opened-dropdown.png
diff --git a/packages/terra-form-select/tests/wdio/select-spec.js b/packages/terra-form-select/tests/wdio/select-spec.js
@@ -1795,6 +1795,33 @@ Terra.describeViewports('Select', ['tiny'], () => {
 
       after(() => $('#root').click());
     });
+
+    describe('should retain input value on fucusing another component', () => {
+      it('retain input and focus using tab key', () => {
+        $('[data-terra-select]').click();
+        const input = $('[data-terra-select-combobox] input');
+        input.setValue('Test');
+
+        // Pressing Tab key twice to focus the body
+        browser.keys('Tab');
+        browser.keys('Tab');
+
+        expect($('body')).toBeFocused();
+        expect(input).toHaveValue('Test');
+      });
+
+      it('should retain input value and focus body when body is clicked', () => {
+        const input = $('[data-terra-select-combobox] input');
+
+        $('[data-terra-select]').click();
+        input.setValue('Test');
+
+        $('body').click();
+
+        expect($('body')).toBeFocused();
+        expect(input).toHaveValue('Test');
+      });
+    });
   });
 
   describe('Search Variant - controlled', () => {