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