@patternfly/react-core 5.0.0-alpha.115 → 5.0.0-alpha.116

package/src/deprecated/components/Select/Select.tsx

@@ -1381,25 +1381,26 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={
-                    typeaheadInputValue !== null
-                      ? typeaheadInputValue
-                      : this.getDisplay(selections[0] as string, 'text') || ''
-                  }
-                  type="text"
-                  onClick={this.onClick}
-                  onChange={this.onChange}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id={`${selectToggleId}-select-typeahead`}
+                    aria-label={typeAheadAriaLabel}
+                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                    placeholder={placeholderText as string}
+                    value={
+                      typeaheadInputValue !== null
+                        ? typeaheadInputValue
+                        : this.getDisplay(selections[0] as string, 'text') || ''
+                    }
+                    type="text"
+                    onClick={this.onClick}
+                    onChange={this.onChange}
+                    autoComplete={inputAutoComplete}
+                    disabled={isDisabled}
+                    ref={this.inputRef}
+                  />
+                </div>
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1409,22 +1410,23 @@ 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}
-                <input
-                  className={css(formStyles.formControl, 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}
-                  onClick={this.onClick}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    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}
+                    onClick={this.onClick}
+                    autoComplete={inputAutoComplete}
+                    disabled={isDisabled}
+                    ref={this.inputRef}
+                  />
+                </div>
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
             </React.Fragment>

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1620,16 +1620,19 @@ exports[`typeahead multi select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -1672,16 +1675,19 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -1896,16 +1902,19 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             </ul>
           </div>
         </div>
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2038,15 +2047,18 @@ exports[`typeahead select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-select-closed-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-select-closed-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -2089,15 +2101,18 @@ exports[`typeahead select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-9-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-9-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2198,15 +2213,18 @@ exports[`typeahead select renders selected successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-10-select-typeahead"
-          placeholder=""
-          type="text"
-          value="Mr"
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-10-select-typeahead"
+            placeholder=""
+            type="text"
+            value="Mr"
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"