@patternfly/react-core 5.0.0-alpha.3 → 5.0.0-alpha.31

package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx

@@ -28,41 +28,51 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState<string>('');
   const [menuItems, setMenuItems] = React.useState<MenuItemProps[]>(intitalMenuItems);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const [isSelected, setIsSelected] = React.useState(false);
 
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const triggerRef = React.useRef<MenuToggleElement>(null);
 
   React.useEffect(() => {
     let newMenuItems: MenuItemProps[] = intitalMenuItems;
 
     // Filter menu items based on the text input value when one exists
     if (inputValue) {
-      newMenuItems = intitalMenuItems.filter(menuItem =>
-        String(menuItem.children)
-          .toLowerCase()
-          .includes(inputValue.toLowerCase())
+      newMenuItems = intitalMenuItems.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
       if (!newMenuItems.length) {
-        newMenuItems = [{ isDisabled: true, children: 'No results found' }];
+        newMenuItems = [{ isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isMenuOpen) {
+        setIsMenuOpen(true);
       }
     }
 
     setMenuItems(newMenuItems);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
   }, [inputValue]);
 
-  const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
+  const focusOnInput = () => textInputRef.current?.focus();
 
-  const onMenuSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
-    if (itemId) {
+  const onMenuSelect = (_event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
+    // Only allow selection if the item is a valid, selectable option
+    if (itemId && itemId !== 'no results') {
       setInputValue(itemId.toString());
       setIsSelected(true);
     }
 
     setIsMenuOpen(false);
     setFocusedItemIndex(null);
+    setActiveItem(null);
     focusOnInput();
   };
 
@@ -89,53 +99,73 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = menuItems.filter((item) => !item.isDisabled)[indexToFocus];
+      setActiveItem(`composable-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = menuItems.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = menuItems.filter((menuItem) => !menuItem.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isMenuOpen) {
+        // Only allow selection if the first item is a valid, selectable option
+        if (isMenuOpen && focusedItem.itemId !== 'no results') {
           setInputValue(String(focusedItem.children));
           setIsSelected(true);
         }
 
-        setIsMenuOpen(prevIsOpen => !prevIsOpen);
+        setIsMenuOpen((prevIsOpen) => !prevIsOpen);
         setFocusedItemIndex(null);
+        setActiveItem(null);
         focusOnInput();
 
         break;
       case 'Tab':
       case 'Escape':
         setIsMenuOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isMenuOpen && setIsMenuOpen(true);
     }
   };
 
-  // Close the menu when a click occurs outside of the menu toggle content
+  // Close the menu when a click occurs outside of the menu, toggle, or input
   const onDocumentClick = (event: MouseEvent | undefined) => {
-    if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
+    const isValidClick = [menuRef, menuToggleRef, textInputRef].some((ref) =>
+      ref?.current?.contains(event?.target as HTMLElement)
+    );
+    if (isMenuOpen && !isValidClick) {
       setIsMenuOpen(false);
+      setActiveItem(null);
+    }
+  };
+
+  // Close the menu when focus is on a menu item and Escape or Tab is pressed
+  const onDocumentKeydown = (event: KeyboardEvent | undefined) => {
+    if (isMenuOpen && menuRef?.current?.contains(event?.target as HTMLElement)) {
+      if (event?.key === 'Escape') {
+        setIsMenuOpen(false);
+        focusOnInput();
+      } else if (event?.key === 'Tab') {
+        setIsMenuOpen(false);
+      }
     }
   };
 
   const toggleMenuOpen = () => {
-    setIsMenuOpen(prevIsOpen => !prevIsOpen);
+    setIsMenuOpen((prevIsOpen) => !prevIsOpen);
     textInputRef.current?.focus();
   };
 
-  const onTextInputChange = (value: string) => {
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     setIsSelected(false);
   };
@@ -144,6 +174,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     <Popper
       trigger={
         <MenuToggle
+          ref={triggerRef}
           variant="typeahead"
           onClick={toggleMenuOpen}
           innerRef={menuToggleRef}
@@ -159,6 +190,10 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
               id="typeahead-select-input"
               autoComplete="off"
               innerRef={textInputRef}
+              {...(activeItem && { 'aria-activedescendant': activeItem })}
+              role="combobox"
+              isExpanded={isMenuOpen}
+              aria-controls="composable-typeahead-listbox"
             />
 
             <TextInputGroupUtilities>
@@ -171,16 +206,17 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
           </TextInputGroup>
         </MenuToggle>
       }
+      triggerRef={triggerRef}
       popper={
-        <Menu id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
+        <Menu role="listbox" ref={menuRef} id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
           <MenuContent>
-            <MenuList>
+            <MenuList id="composable-typeahead-listbox">
               {menuItems.map((itemProps, index) => (
                 <MenuItem
+                  id={`composable-typeahead-${itemProps.itemId.replace(' ', '-')}`}
                   key={itemProps.itemId || itemProps.children}
                   isFocused={focusedItemIndex === index}
                   className={itemProps.className}
-                  onClick={() => setIsSelected(true)}
                   {...itemProps}
                   ref={null}
                 />
@@ -189,8 +225,10 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
           </MenuContent>
         </Menu>
       }
+      popperRef={menuRef}
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
+      onDocumentKeyDown={onDocumentKeydown}
     />
   );
 };

package/src/demos/DataListDemo.md

@@ -70,15 +70,15 @@ class ExpandableDataList extends React.Component {
       );
     };
 
-    this.onToggle1 = isOpen1 => {
+    this.onToggle1 = (_event, isOpen1) => {
       this.setState({ isOpen1 });
     };
 
-    this.onToggle2 = isOpen2 => {
+    this.onToggle2 = (_event, isOpen2) => {
       this.setState({ isOpen2 });
     };
 
-    this.onToggle3 = isOpen3 => {
+    this.onToggle3 = (_event, isOpen3) => {
       this.setState({ isOpen3 });
     };
 

package/src/demos/DatePicker/DatePicker.md

@@ -80,7 +80,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onFromTimeChange = (time, hour, minute) => {
+  const onFromTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(from)) {
       const updatedFromDate = new Date(from);
       updatedFromDate.setHours(hour);
@@ -99,7 +99,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onToTimeChange = (time, hour, minute) => {
+  const onToTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(to)) {
       const updatedToDate = new Date(to);
       updatedToDate.setHours(hour);

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -101,12 +101,12 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -123,7 +123,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -250,7 +250,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -263,7 +265,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );
@@ -351,7 +353,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -408,7 +412,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
 
     setLocationSelections(
       locationSelections.includes(itemStr)
-        ? locationSelections.filter(selection => selection !== itemStr)
+        ? locationSelections.filter((selection) => selection !== itemStr)
         : [itemStr, ...locationSelections]
     );
   }
@@ -462,7 +466,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />
@@ -550,7 +556,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={attributeContainerRef}>
       <Popper
         trigger={attributeToggle}
+        triggerRef={attributeToggleRef}
         popper={attributeMenu}
+        popperRef={attributeMenuRef}
         appendTo={attributeContainerRef.current || undefined}
         isVisible={isAttributeMenuOpen}
       />

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -59,7 +59,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       return true;
     }
 
-    return selections.some(searchValue => {
+    return selections.some((searchValue) => {
       let input: RegExp;
       try {
         input = new RegExp(searchValue, 'i');
@@ -78,12 +78,12 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []);
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []);
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -100,7 +100,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -226,7 +226,9 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -282,7 +284,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
 
     const itemStr = itemId.toString();
     setSelections(
-      selections.includes(itemStr) ? selections.filter(selection => selection !== itemStr) : [itemStr, ...selections]
+      selections.includes(itemStr) ? selections.filter((selection) => selection !== itemStr) : [itemStr, ...selections]
     );
   }
 
@@ -329,7 +331,14 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
 
   const select = (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
+      <Popper
+        trigger={toggle}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
     </div>
   );
 

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -84,12 +84,12 @@ export const FilterFaceted: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -106,7 +106,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -233,7 +233,9 @@ export const FilterFaceted: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -293,13 +295,13 @@ export const FilterFaceted: React.FunctionComponent = () => {
     if (category === 'status') {
       setStatusSelections(
         statusSelections.includes(itemStr)
-          ? statusSelections.filter(selection => selection !== itemStr)
+          ? statusSelections.filter((selection) => selection !== itemStr)
           : [itemStr, ...statusSelections]
       );
     } else {
       setLocationSelections(
         locationSelections.includes(itemStr)
-          ? locationSelections.filter(selection => selection !== itemStr)
+          ? locationSelections.filter((selection) => selection !== itemStr)
           : [itemStr, ...locationSelections]
       );
     }
@@ -307,9 +309,9 @@ export const FilterFaceted: React.FunctionComponent = () => {
 
   const onChipDelete = (category: string, chip: string) => {
     if (category === 'status') {
-      setStatusSelections(statusSelections.filter(selection => selection !== chip));
+      setStatusSelections(statusSelections.filter((selection) => selection !== chip));
     } else {
-      setLocationSelections(locationSelections.filter(selection => selection !== chip));
+      setLocationSelections(locationSelections.filter((selection) => selection !== chip));
     }
   };
 
@@ -383,7 +385,14 @@ export const FilterFaceted: React.FunctionComponent = () => {
 
   const select = (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
+      <Popper
+        trigger={toggle}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
     </div>
   );
 

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -81,12 +81,12 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -103,7 +103,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -230,7 +230,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -322,7 +324,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -379,7 +383,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
 
     setLocationSelections(
       locationSelections.includes(itemStr)
-        ? locationSelections.filter(selection => selection !== itemStr)
+        ? locationSelections.filter((selection) => selection !== itemStr)
         : [itemStr, ...locationSelections]
     );
   }
@@ -434,7 +438,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -82,12 +82,12 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -104,7 +104,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -231,7 +231,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -324,7 +326,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -421,7 +425,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -85,12 +85,12 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -107,7 +107,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -234,7 +234,9 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -246,7 +248,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );