fix(SelectDeprecated): use textinput component for typeahead (pattern…

…fly#9317) * fix(SelectDeprecated): use textinput component for typeahead * remove commented out code * remove duplicate form control class
Kells512 · Sep 1, 2023 · f8adb72 · f8adb72
1 parent c43a9a8
commit f8adb72
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx
@@ -37,6 +37,7 @@ import { Popper } from '../../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../../helpers/favorites';
 import { ValidatedOptions } from '../../../helpers/constants';
 import { findTabbableElements } from '../../../helpers/util';
+import { TextInput } from '../../../components/TextInput';
 
 // seed for the aria-labelledby ID
 let currentId = 0;
@@ -1381,8 +1382,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-typeahead`}
                     aria-label={typeAheadAriaLabel}
@@ -1393,14 +1394,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                         ? typeaheadInputValue
                         : this.getDisplay(selections[0] as string, 'text') || ''
                     }
-                    type="text"
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
-                    onChange={this.onChange}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1410,23 +1409,21 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                 {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-multi-typeahead-typeahead`}
                     aria-label={typeAheadAriaLabel}
                     aria-invalid={validated === ValidatedOptions.error}
                     {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                     placeholder={placeholderText as string}
                     value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                    type="text"
-                    onChange={this.onChange}
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
             </React.Fragment>

diff --git a/.../react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/.../react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1673,6 +1673,9 @@ exports[`typeahead multi select renders closed successfully 1`] = `
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
@@ -1730,6 +1733,9 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
@@ -1963,6 +1969,9 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
@@ -2111,8 +2120,12 @@ exports[`typeahead select renders closed successfully 1`] = `
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-select-closed-select-typeahead"
             placeholder=""
             type="text"
@@ -2167,8 +2180,12 @@ exports[`typeahead select renders expanded successfully 1`] = `
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-9-select-typeahead"
             placeholder=""
             type="text"
@@ -2281,8 +2298,12 @@ exports[`typeahead select renders selected successfully 1`] = `
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-10-select-typeahead"
             placeholder=""
             type="text"