@patternfly/react-table 4.61.8 → 4.61.9

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.61.9 (2022-01-25)
+
+
+### Bug Fixes
+
+* **Select:**  Footer keyboard bugs ([#6844](https://github.com/patternfly/patternfly-react/issues/6844)) ([7f06125](https://github.com/patternfly/patternfly-react/commit/7f06125cfb52884708107da82ca3800207c9846f))
+
+
+
+
+
 ## 4.61.8 (2022-01-24)
 
 

package/dist/umd/react-table.js

@@ -1076,6 +1076,18 @@
             }
         }
     }
+    /** This function returns a list of tabbable items in a container
+     *
+     *  @param {any} containerRef to the container
+     *  @param {string} tababbleSelectors CSS selector string of tabbable items
+     */
+    function findTabbableElements(containerRef, tababbleSelectors) {
+        const tabbable = containerRef.current.querySelectorAll(tababbleSelectors);
+        const list = Array.prototype.filter.call(tabbable, function (item) {
+            return item.tabIndex >= '0';
+        });
+        return list;
+    }
     /** This function is a helper for keyboard navigation through dropdowns.
      *
      * @param {number} index The index of the element you're on
@@ -4860,6 +4872,7 @@
         ArrowLeft: 'ArrowLeft',
         ArrowRight: 'ArrowRight'
     };
+    const SelectFooterTabbableItems = 'input, button, select, textarea, a[href]';
 
     class SelectOption extends React__namespace.Component {
         constructor() {
@@ -4885,7 +4898,12 @@
                         event.stopPropagation();
                     }
                     else {
-                        keyHandler(index, innerIndex, 'tab');
+                        if (event.shiftKey) {
+                            keyHandler(index, innerIndex, 'up');
+                        }
+                        else {
+                            keyHandler(index, innerIndex, 'tab');
+                        }
                     }
                 }
                 event.preventDefault();
@@ -5122,7 +5140,8 @@
                                 isChecked: this.checkForValue(option.props.value, checked),
                                 sendRef,
                                 keyHandler,
-                                index: index++
+                                index: index++,
+                                isLastOptionBeforeFooter
                             })))) : null
                     });
                 });
@@ -5205,26 +5224,19 @@
                     onClose();
                 }
             };
-            this.findTabbableFooterElements = () => {
-                const tabbable = this.props.footerRef.current.querySelectorAll('input, button, select, textarea, a[href]');
-                const list = Array.prototype.filter.call(tabbable, function (item) {
-                    return item.tabIndex >= '0';
-                });
-                return list;
-            };
             this.handleGlobalKeys = (event) => {
-                const { parentRef, menuRef, hasFooter, isOpen, variant, onToggle, onClose } = this.props;
+                const { parentRef, menuRef, hasFooter, footerRef, isOpen, variant, onToggle, onClose, moveFocusToLastMenuItem } = this.props;
                 const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
                 const escFromWithinMenu = menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target);
                 if (isOpen &&
                     event.key === KeyTypes.Tab &&
                     (variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti)) {
-                    this.props.handleTypeaheadKeys('tab');
+                    this.props.handleTypeaheadKeys('tab', event.shiftKey);
                     event.preventDefault();
                     return;
                 }
                 if (isOpen && event.key === KeyTypes.Tab && hasFooter) {
-                    const tabbableItems = this.findTabbableFooterElements();
+                    const tabbableItems = findTabbableElements(footerRef, SelectFooterTabbableItems);
                     // If no tabbable item in footer close select
                     if (tabbableItems.length <= 0) {
                         onToggle(false);
@@ -5233,14 +5245,30 @@
                         return;
                     }
                     else {
-                        // if current element is not in footer, tab to first tabbable element in footer
-                        const currentElementIndex = tabbableItems.findIndex(item => item === document.activeElement);
+                        // if current element is not in footer, tab to first tabbable element in footer, or close if shift clicked
+                        const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
                         if (currentElementIndex === -1) {
-                            tabbableItems[0].focus();
-                            return;
+                            if (event.shiftKey) {
+                                if (variant !== 'checkbox') {
+                                    // only close non checkbox variation on shift clicked
+                                    onToggle(false);
+                                    onClose();
+                                    this.toggle.current.focus();
+                                }
+                            }
+                            else {
+                                // tab to footer
+                                tabbableItems[0].focus();
+                                return;
+                            }
                         }
                         // Current element is in footer.
                         if (event.shiftKey) {
+                            // Move focus back to menuif current tab index is 0
+                            if (currentElementIndex === 0) {
+                                moveFocusToLastMenuItem();
+                                event.preventDefault();
+                            }
                             return;
                         }
                         // Tab to next element in footer or close if there are none
@@ -5314,7 +5342,7 @@
         }
         render() {
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onClickTypeaheadToggleButton, handleTypeaheadKeys, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
+            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onClickTypeaheadToggleButton, handleTypeaheadKeys, moveFocusToLastMenuItem, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "moveFocusToLastMenuItem", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
             const isTypeahead = variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti || hasClearButton;
             const toggleProps = {
@@ -5777,9 +5805,37 @@
                     typeaheadInputValue
                 }));
             };
-            this.handleTypeaheadKeys = (position) => {
+            this.switchFocusToFavoriteMenu = () => {
+                const { typeaheadCurrIndex, typeaheadStoredIndex } = this.state;
+                let indexForFocus = 0;
+                if (typeaheadCurrIndex !== -1) {
+                    indexForFocus = typeaheadCurrIndex;
+                }
+                else if (typeaheadStoredIndex !== -1) {
+                    indexForFocus = typeaheadStoredIndex;
+                }
+                if (this.refCollection[indexForFocus] !== null && this.refCollection[indexForFocus][0] !== null) {
+                    this.refCollection[indexForFocus][0].focus();
+                }
+                else {
+                    this.clearRef.current.focus();
+                }
+                this.setState({
+                    tabbedIntoFavoritesMenu: true,
+                    typeaheadCurrIndex: -1
+                });
+            };
+            this.moveFocusToLastMenuItem = () => {
+                const refCollectionLen = this.refCollection.length;
+                if (refCollectionLen > 0 &&
+                    this.refCollection[refCollectionLen - 1] !== null &&
+                    this.refCollection[refCollectionLen - 1][0] !== null) {
+                    this.refCollection[refCollectionLen - 1][0].focus();
+                }
+            };
+            this.handleTypeaheadKeys = (position, shiftKey = false) => {
                 const { isOpen, onFavorite } = this.props;
-                const { typeaheadCurrIndex, tabbedIntoFavoritesMenu, typeaheadStoredIndex } = this.state;
+                const { typeaheadCurrIndex, tabbedIntoFavoritesMenu } = this.state;
                 const typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
                 if (isOpen) {
                     if (position === 'enter') {
@@ -5797,32 +5853,127 @@
                     }
                     else if (position === 'tab') {
                         if (onFavorite) {
+                            // if the input has focus, tab to the first item or the last item that was previously focused.
                             if (this.inputRef.current === document.activeElement) {
-                                let indexForFocus = 0;
-                                if (typeaheadCurrIndex !== -1) {
-                                    indexForFocus = typeaheadCurrIndex;
-                                }
-                                else if (typeaheadStoredIndex !== -1) {
-                                    indexForFocus = typeaheadStoredIndex;
-                                }
-                                if (this.refCollection[indexForFocus] !== null && this.refCollection[indexForFocus][0] !== null) {
-                                    this.refCollection[indexForFocus][0].focus();
+                                // If shift is also clicked and there is a footer, tab to the last item in tabbable footer
+                                if (this.props.footer && shiftKey) {
+                                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                    if (tabbableItems.length > 0) {
+                                        if (tabbableItems[tabbableItems.length - 1]) {
+                                            tabbableItems[tabbableItems.length - 1].focus();
+                                        }
+                                    }
                                 }
                                 else {
-                                    this.clearRef.current.focus();
+                                    this.switchFocusToFavoriteMenu();
                                 }
-                                this.setState({
-                                    tabbedIntoFavoritesMenu: true,
-                                    typeaheadCurrIndex: -1
-                                });
                             }
                             else {
-                                this.inputRef.current.focus();
-                                this.setState({ tabbedIntoFavoritesMenu: false });
+                                // focus is on menu or footer
+                                if (this.props.footer) {
+                                    let tabbedIntoMenu = false;
+                                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                    if (tabbableItems.length > 0) {
+                                        // if current element is not in footer, tab to first tabbable element in footer,
+                                        // if shift was clicked, tab to input since focus is on menu
+                                        const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
+                                        if (currentElementIndex === -1) {
+                                            if (shiftKey) {
+                                                // currently in menu, shift back to input
+                                                this.inputRef.current.focus();
+                                            }
+                                            else {
+                                                // currently in menu, tab to first tabbable item in footer
+                                                tabbableItems[0].focus();
+                                            }
+                                        }
+                                        else {
+                                            // already in footer
+                                            if (shiftKey) {
+                                                // shift to previous item
+                                                if (currentElementIndex === 0) {
+                                                    // on first footer item, shift back to menu
+                                                    this.switchFocusToFavoriteMenu();
+                                                    tabbedIntoMenu = true;
+                                                }
+                                                else {
+                                                    // shift to previous footer item
+                                                    tabbableItems[currentElementIndex - 1].focus();
+                                                }
+                                            }
+                                            else {
+                                                // tab to next tabbable item in footer or to input.
+                                                if (tabbableItems[currentElementIndex + 1]) {
+                                                    tabbableItems[currentElementIndex + 1].focus();
+                                                }
+                                                else {
+                                                    this.inputRef.current.focus();
+                                                }
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        // no tabbable items in footer, tab to input
+                                        this.inputRef.current.focus();
+                                        tabbedIntoMenu = false;
+                                    }
+                                    this.setState({ tabbedIntoFavoritesMenu: tabbedIntoMenu });
+                                }
+                                else {
+                                    this.inputRef.current.focus();
+                                    this.setState({ tabbedIntoFavoritesMenu: false });
+                                }
                             }
                         }
                         else {
-                            this.onToggle(false);
+                            // Close if there is no footer
+                            if (!this.props.footer) {
+                                this.onToggle(false);
+                            }
+                            else {
+                                // has footer
+                                const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
+                                if (this.inputRef.current === document.activeElement) {
+                                    if (shiftKey) {
+                                        // close toggle if shift key and tab on input
+                                        this.onToggle(false);
+                                    }
+                                    else {
+                                        // tab to first tabbable item in footer
+                                        if (tabbableItems[0]) {
+                                            tabbableItems[0].focus();
+                                        }
+                                        else {
+                                            this.onToggle(false);
+                                        }
+                                    }
+                                }
+                                else {
+                                    // focus is in footer
+                                    if (shiftKey) {
+                                        if (currentElementIndex === 0) {
+                                            // shift tab back to input
+                                            this.inputRef.current.focus();
+                                        }
+                                        else {
+                                            // shift to previous footer item
+                                            tabbableItems[currentElementIndex - 1].focus();
+                                        }
+                                    }
+                                    else {
+                                        // tab to next footer item or close tab if last item
+                                        if (tabbableItems[currentElementIndex + 1]) {
+                                            tabbableItems[currentElementIndex + 1].focus();
+                                        }
+                                        else {
+                                            // no next item, close toggle
+                                            this.onToggle(false);
+                                            this.inputRef.current.focus();
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
                     else if (!tabbedIntoFavoritesMenu) {
@@ -5979,13 +6130,13 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             onFilter, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            onTypeaheadInputChanged, onCreateOption, isCreatable, onToggle, createText, noResultsFoundText, customBadgeText, inputIdPrefix, 
+            onTypeaheadInputChanged, onCreateOption, isCreatable, onToggle, createText, noResultsFoundText, customBadgeText, inputIdPrefix, inputAutoComplete, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
             isInputValuePersisted, isInputFilterPersisted, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject"]);
+            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
             const selectToggleId = toggleId || `pf-select-toggle-id-${currentId++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -6023,11 +6174,11 @@
             if (isOpen) {
                 if (renderableItems.find(item => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.key) === 'loading'; }) === undefined) {
                     if (loadingVariant === 'spinner') {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading", isGrouped: true },
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading" },
                             React__namespace.createElement(Spinner, { size: "lg" })));
                     }
                     else if (loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.text) {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, isGrouped: true, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
                     }
                 }
             }
@@ -6066,6 +6217,23 @@
                                     this.handleMenuKeys(0, 0, 'right');
                                     event.preventDefault();
                                 }
+                                else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
+                                    // tab to footer or close menu if shift key
+                                    if (event.shiftKey) {
+                                        this.onToggle(false);
+                                    }
+                                    else {
+                                        const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                        if (tabbableItems.length > 0) {
+                                            tabbableItems[0].focus();
+                                            event.stopPropagation();
+                                            event.preventDefault();
+                                        }
+                                        else {
+                                            this.onToggle(false);
+                                        }
+                                    }
+                                }
                                 else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
                                     // More modal-like experience for checkboxes
                                     // Let SelectOption handle this
@@ -6078,7 +6246,7 @@
                                     event.stopPropagation();
                                     event.preventDefault();
                                 }
-                            }, ref: this.filterRef, autoComplete: "never" })),
+                            }, ref: this.filterRef, autoComplete: inputAutoComplete })),
                     React__namespace.createElement(Divider, { key: "inline-filter-divider" })));
                 renderableItems = [filterBox, ...typeaheadFilteredChildren].map((option, index) => React__namespace.cloneElement(option, { key: index }));
             }
@@ -6140,7 +6308,7 @@
                 " ") : innerMenu;
             const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
             const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
-                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
+                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, moveFocusToLastMenuItem: this.moveFocusToLastMenuItem, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
                     customContent && (React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
                         toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                         React__namespace.createElement("span", { className: css(_default$b.selectToggleText) }, placeholderText))),
@@ -6161,13 +6329,13 @@
                             toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                             React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
                                     ? typeaheadInputValue
-                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: "never", disabled: isDisabled, ref: this.inputRef })),
+                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                     variant === SelectVariant.typeaheadMulti && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                             selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "never", disabled: isDisabled, ref: this.inputRef })),
+                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
                     validated === ValidatedOptions.success && (React__namespace.createElement("span", { className: css(_default$b.selectToggleStatusIcon) },
                         React__namespace.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
@@ -6223,6 +6391,7 @@
         inlineFilterPlaceholderText: null,
         customBadgeText: null,
         inputIdPrefix: '',
+        inputAutoComplete: navigator.userAgent.match('Chrome') ? getUniqueId('pf-no-autocomplete') : 'off',
         menuAppendTo: 'inline',
         favorites: [],
         favoritesLabel: 'Favorites',