[terra-tag] Combobox throws error when integrated with Fusion Combo B…

…ox (#3942)
cerner · Oct 19, 2023 · 5e78324 · 5e78324
1 parent 2b47580
commit 5e78324
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 3 deletions.
diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+* Changed
+  * Changed `class` selector used for accessing input text with data-attribute in form select `combobox` and `tag`.
 ## 6.48.0 - (October 16, 2023)
 
 * Changed

diff --git a/packages/terra-form-select/src/combobox/Menu.jsx b/packages/terra-form-select/src/combobox/Menu.jsx
@@ -342,7 +342,7 @@ class Menu extends React.Component {
     // Detects if option is an "Add option" and provides accessible text
     const active = this.menu.querySelector('[data-select-active]');
     if (active && active.hasAttribute('data-terra-select-add-option')) {
-      const display = active.querySelector("[class*='display']").innerText;
+      const display = active.querySelector('[data-terra-add-option]') ? active.querySelector('[data-terra-add-option]').innerText : null;
       visuallyHiddenComponent.current.innerText = display;
     }
 

diff --git a/packages/terra-form-select/src/shared/_Option.jsx b/packages/terra-form-select/src/shared/_Option.jsx
@@ -132,7 +132,7 @@ const Option = ({
       aria-label={itemLabel}
     >
       {(isCheckable || isAddOption) && <span className={cx('icon')} />}
-      <span className={cx('display')}>{display}</span>
+      <span data-terra-add-option className={cx('display')}>{display}</span>
     </li>
   );
 };

diff --git a/packages/terra-form-select/src/tag/Menu.jsx b/packages/terra-form-select/src/tag/Menu.jsx
@@ -362,7 +362,7 @@ class Menu extends React.Component {
     // Detects if option is an "Add option" and provides accessible text
     const active = this.menu.querySelector('[data-select-active]');
     if (active && active.hasAttribute('data-terra-select-add-option')) {
-      const display = active.querySelector("[class*='display']").innerText;
+      const display = active.querySelector('[data-terra-add-option]') ? active.querySelector('[data-terra-add-option]').innerText : null;
       visuallyHiddenComponent.current.innerText = display;
     }
 

diff --git a/packages/terra-form-select/tests/jest/__snapshots__/ClearOption.test.jsx.snap b/packages/terra-form-select/tests/jest/__snapshots__/ClearOption.test.jsx.snap
@@ -60,6 +60,7 @@ exports[`ClearOption correctly applies the theme context className 1`] = `
       >
         <span
           className="display"
+          data-terra-add-option={true}
         >
           Clear
         </span>

diff --git a/packages/terra-form-select/tests/jest/__snapshots__/Menu.test.jsx.snap b/packages/terra-form-select/tests/jest/__snapshots__/Menu.test.jsx.snap
@@ -125,6 +125,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
           >
             <span
               className="display"
+              data-terra-add-option={true}
             >
               display
             </span>

diff --git a/packages/terra-form-select/tests/jest/__snapshots__/Option.test.jsx.snap b/packages/terra-form-select/tests/jest/__snapshots__/Option.test.jsx.snap
@@ -24,6 +24,7 @@ exports[`Option correctly applies the theme context className 1`] = `
     >
       <span
         className="display"
+        data-terra-add-option={true}
       >
         display
       </span>
@@ -44,6 +45,7 @@ exports[`Option should render a default Option 1`] = `
 >
   <span
     className="display"
+    data-terra-add-option={true}
   >
     display
   </span>
@@ -62,6 +64,7 @@ exports[`Option should render a disabled Option 1`] = `
 >
   <span
     className="display"
+    data-terra-add-option={true}
   >
     display
   </span>

diff --git a/...nical-lowlight-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png b/...nical-lowlight-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png
diff --git a/...e/orion-fusion-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png b/...e/orion-fusion-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png
diff --git a/.../terra-default-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png b/.../terra-default-theme/en/chrome_tiny/select-spec/Add_New_Option_in_combo_box.png
diff --git a/packages/terra-form-select/tests/wdio/select-spec.js b/packages/terra-form-select/tests/wdio/select-spec.js
@@ -2517,4 +2517,19 @@ Terra.describeViewports('Select', ['tiny'], () => {
       after(() => $('#root').click());
     });
   });
+
+  describe('Combobox Add New Option', () => {
+    before(() => {
+      browser.url('/raw/tests/cerner-terra-core-docs/form-select/is-touch-accessible-combobox');
+    });
+
+    it('should add new option in combo box', () => {
+      $('[data-terra-select]').click();
+      browser.keys(['N', 'e', 'w']);
+      $('[data-terra-add-option]').click();
+      expect($('[data-terra-add-option]')).toHaveTextContaining('Add "New"');
+      $('[data-terra-select]').click();
+      Terra.validates.element('Add New Option in combo box', { selector: '#root' });
+    });
+  });
 });
-Original file line number
+Diff line change
@@ Expand Up @@
           >
             <span
               className="display"
+              data-terra-add-option={true}
             >
               Clear
             </span>
@@ Expand Down @@