From 72fc0ef73e6c8063075a77bcf37fc8bd7e4c8baf Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 18:49:17 +0100
Subject: [PATCH] fix: issue with keyDown propagation

---
 webui/src/pages/list/Filter.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 2ba6ffaf..782c2041 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import Menu from '@material-ui/core/Menu';
@@ -117,8 +117,13 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLButtonElement>(null);
   const classes = useStyles({ active: false });
 
+  useEffect(() => {
+    searchRef && searchRef.current && searchRef.current.focus();
+  }, [filter]);
+
   const content = (
     <>
       {Icon && <Icon fontSize="small" classes={{ root: classes.icon }} />}
@@ -139,6 +144,7 @@ function FilterDropdown({
       </button>
       <Menu
         getContentAnchorEl={null}
+        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -163,6 +169,7 @@ function FilterDropdown({
               const { value } = e.target;
               setFilter(value);
             }}
+            onKeyDown={(e) => e.stopPropagation()}
             value={filter}
             label={`Filter ${children}`}
           />