fix: typeahead menu toggle should be focused when clicked

cryostatio · Sep 3, 2024 · 7773691 · 7773691
1 parent 216174b
commit 7773691
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/src/app/Recordings/Filters/LabelFilter.tsx b/src/app/Recordings/Filters/LabelFilter.tsx
@@ -27,6 +27,7 @@ import {
   TextInputGroupUtilities,
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
+import _ from 'lodash';
 import * as React from 'react';
 
 export interface LabelFilterProps {
@@ -65,7 +66,8 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
   }, [recordings, filteredLabels]);
 
   const filteredLabelOptions = React.useMemo(() => {
-    return !filterValue ? labelOptions : labelOptions.filter((l) => l.includes(filterValue.toLowerCase()));
+    const reg = new RegExp(_.escapeRegExp(filterValue), 'i');
+    return !filterValue ? labelOptions : labelOptions.filter((l) => reg.test(l));
   }, [filterValue, labelOptions]);
 
   const selectOptions = React.useMemo(() => {
@@ -98,13 +100,7 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
           />
           <TextInputGroupUtilities>
             {filterValue ? (
-              <Button
-                variant="plain"
-                onClick={() => {
-                  setFilterValue('');
-                }}
-                aria-label="Clear input value"
-              >
+              <Button variant="plain" onClick={() => setFilterValue('')} aria-label="Clear input value">
                 <TimesIcon aria-hidden />
               </Button>
             ) : null}
@@ -123,6 +119,7 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
       aria-label="Filter by label"
       onOpenChange={(isOpen) => setIsExpanded(isOpen)}
       onOpenChangeKeys={['Escape']}
+      shouldFocusFirstItemOnOpen={false}
     >
       <SelectList id="typeahead-label-select">{selectOptions}</SelectList>
     </Select>

diff --git a/src/app/Recordings/Filters/NameFilter.tsx b/src/app/Recordings/Filters/NameFilter.tsx
@@ -27,6 +27,7 @@ import {
   TextInputGroupUtilities,
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
+import _ from 'lodash';
 import * as React from 'react';
 
 export interface NameFilterProps {
@@ -58,7 +59,8 @@ export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredName
   }, [recordings, filteredNames]);
 
   const filteredNameOptions = React.useMemo(() => {
-    return !filterValue ? nameOptions : nameOptions.filter((n) => n.includes(filterValue.toLowerCase()));
+    const reg = new RegExp(_.escapeRegExp(filterValue), 'i');
+    return !filterValue ? nameOptions : nameOptions.filter((n) => reg.test(n));
   }, [filterValue, nameOptions]);
 
   const selectOptions = React.useMemo(() => {
@@ -89,13 +91,7 @@ export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredName
           />
           <TextInputGroupUtilities>
             {filterValue ? (
-              <Button
-                variant="plain"
-                onClick={() => {
-                  setFilterValue('');
-                }}
-                aria-label="Clear input value"
-              >
+              <Button variant="plain" onClick={() => setFilterValue('')} aria-label="Clear input value">
                 <TimesIcon aria-hidden />
               </Button>
             ) : null}
@@ -114,6 +110,7 @@ export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredName
       aria-label="Filter by name"
       onOpenChange={(isOpen) => setIsExpanded(isOpen)}
       onOpenChangeKeys={['Escape']}
+      shouldFocusFirstItemOnOpen={false}
     >
       <SelectList>{selectOptions}</SelectList>
     </Select>