fix: issue with keyDown propagation

This commit is contained in:
Aien Saidi 2021-03-24 18:49:17 +01:00 committed by Sascha
parent 1216fb1e27
commit 72fc0ef73e

View File

@ -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}`}
/>