[terra-form-select-combobox] Added no results found text in combobox (#…

…3954)
cerner · Nov 6, 2023 · 39eb9b2 · 39eb9b2
1 parent dcedec7
commit 39eb9b2
Show file tree

Hide file tree

Showing 57 changed files with 16 additions and 2 deletions.
diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added No results found text in `terra-form-select-combobox`.
+
 ## 6.49.0 - (October 23, 2023)
 
 * Changed

diff --git a/packages/terra-form-select/src/combobox/Menu.jsx b/packages/terra-form-select/src/combobox/Menu.jsx
@@ -10,6 +10,7 @@ import ClearOption from '../shared/_ClearOption';
 import MenuUtil from '../shared/_MenuUtil';
 import SharedUtil from '../shared/_SharedUtil';
 import styles from '../shared/_Menu.module.scss';
+import NoResults from '../shared/_NoResults';
 
 const cx = classNamesBind.bind(styles);
 
@@ -119,16 +120,21 @@ class Menu extends React.Component {
    */
   static getDerivedStateFromProps(props, state) {
     const {
-      clearOptionDisplay, searchValue,
+      clearOptionDisplay, searchValue, noResultContent,
     } = props;
 
-    const hasNoResults = false;
+    let hasNoResults = false;
     const hasMaxSelection = false;
     let hasAddOption = false;
 
     let children = MenuUtil.filter(props.children, props.searchValue, props.optionFilter);
     children = MenuUtil.updateSelectionState(children, props);
 
+    if (!children.length) {
+      children.push(<NoResults noResultContent={noResultContent} value={searchValue} />);
+      hasNoResults = true;
+    }
+
     if (Menu.shouldAllowFreeText(props, children)) {
       children.push(<AddOption value={searchValue} />);
       hasAddOption = true;

diff --git a/...reference/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-click.png b/...reference/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-click.png
diff --git a/...ce/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png b/...ce/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png
diff --git a/...reference/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-enter.png b/...reference/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-enter.png
diff --git a/...rence/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-free-text.png b/...rence/clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox-free-text.png
diff --git a/...ight-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png b/...ight-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png b/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png b/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png
diff --git a/...ight-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png b/...ight-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png
diff --git a/...ht-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png b/...ht-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png
diff --git a/...clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox_option_selected.png b/...clinical-lowlight-theme/en/chrome_tiny/select-spec/combobox_option_selected.png
diff --git a/...wlight-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png b/...wlight-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png
diff --git a/...owlight-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png b/...owlight-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png
diff --git a/...ght-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png b/...ght-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png
diff --git a/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png b/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png
diff --git a/...light-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png b/...light-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png
diff --git a/...linical-lowlight-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png b/...linical-lowlight-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png
diff --git a/...nce/clinical-lowlight-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png b/...nce/clinical-lowlight-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png
diff --git a/...ence/clinical-lowlight-theme/en/chrome_tiny/select-spec/toggle_click_closes.png b/...ence/clinical-lowlight-theme/en/chrome_tiny/select-spec/toggle_click_closes.png
diff --git a/...ts__/reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-click.png b/...ts__/reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-click.png
diff --git a/...ference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png b/...ference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png
diff --git a/...ts__/reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-enter.png b/...ts__/reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-enter.png
diff --git a/.../reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-free-text.png b/.../reference/orion-fusion-theme/en/chrome_tiny/select-spec/combobox-free-text.png
diff --git a/...sion-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png b/...sion-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png b/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png b/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png
diff --git a/...sion-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png b/...sion-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png
diff --git a/...on-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png b/...on-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png
diff --git a/...ence/orion-fusion-theme/en/chrome_tiny/select-spec/combobox_option_selected.png b/...ence/orion-fusion-theme/en/chrome_tiny/select-spec/combobox_option_selected.png
diff --git a/...fusion-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png b/...fusion-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png
diff --git a/...-fusion-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png b/...-fusion-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png
diff --git a/...ion-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png b/...ion-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png
diff --git a/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png b/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png
diff --git a/...usion-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png b/...usion-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png
diff --git a/...nce/orion-fusion-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png b/...nce/orion-fusion-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png
diff --git a/...eference/orion-fusion-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png b/...eference/orion-fusion-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png
diff --git a/...reference/orion-fusion-theme/en/chrome_tiny/select-spec/toggle_click_closes.png b/...reference/orion-fusion-theme/en/chrome_tiny/select-spec/toggle_click_closes.png
diff --git a/...s__/reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-click.png b/...s__/reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-click.png
diff --git a/...erence/terra-default-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png b/...erence/terra-default-theme/en/chrome_tiny/select-spec/combobox-clicking-off.png
diff --git a/...s__/reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-enter.png b/...s__/reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-enter.png
diff --git a/...reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-free-text.png b/...reference/terra-default-theme/en/chrome_tiny/select-spec/combobox-free-text.png
diff --git a/...ault-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png b/...ault-theme/en/chrome_tiny/select-spec/combobox_clicking_off_closes_dropdown.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png b/...heme/en/chrome_tiny/select-spec/combobox_closed_dropdown_after_tabbing_away.png
diff --git a/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png b/...heme/en/chrome_tiny/select-spec/combobox_closes_dropdown_after_clicking_off.png
diff --git a/...ault-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png b/...ault-theme/en/chrome_tiny/select-spec/combobox_dropdown_not_opened_by_enter.png
diff --git a/...lt-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png b/...lt-theme/en/chrome_tiny/select-spec/combobox_no_results_displayed_on_search.png
diff --git a/...nce/terra-default-theme/en/chrome_tiny/select-spec/combobox_option_selected.png b/...nce/terra-default-theme/en/chrome_tiny/select-spec/combobox_option_selected.png
diff --git a/...efault-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png b/...efault-theme/en/chrome_tiny/select-spec/combobox_option_selected_with_enter.png
diff --git a/...default-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png b/...default-theme/en/chrome_tiny/select-spec/combobox_second-option-highlighted.png
diff --git a/...ult-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png b/...ult-theme/en/chrome_tiny/select-spec/combobox_selected_option_with_keyboard.png
diff --git a/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png b/...me/en/chrome_tiny/select-spec/combobox_selected_second_option_with_keyboard.png
diff --git a/...fault-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png b/...fault-theme/en/chrome_tiny/select-spec/combobox_toggle_icon_closes_dropdown.png
diff --git a/...ce/terra-default-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png b/...ce/terra-default-theme/en/chrome_tiny/select-spec/toggle-icon-open-dropdown.png
diff --git a/...ference/terra-default-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png b/...ference/terra-default-theme/en/chrome_tiny/select-spec/toggle-open-dropdown.png
diff --git a/...eference/terra-default-theme/en/chrome_tiny/select-spec/toggle_click_closes.png b/...eference/terra-default-theme/en/chrome_tiny/select-spec/toggle_click_closes.png
diff --git a/packages/terra-form-select/tests/wdio/select-spec.js b/packages/terra-form-select/tests/wdio/select-spec.js
@@ -536,6 +536,11 @@ Terra.describeViewports('Select', ['tiny'], () => {
         Terra.validates.element('[combobox-spacebar]open-dropdown', { selector: '#root' });
       });
 
+      it('should display no results on search', () => {
+        $('[data-terra-select] input').setValue('John');
+        Terra.validates.element('combobox no results displayed on search', { selector: '#root' });
+      });
+
       after(() => {
         // remove backspace that is added to the input. Bug logged here: https://github.com/cerner/terra-core/issues/2414
         browser.keys('Backspace');