diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx index b9636d97..4e07dcbe 100644 --- a/src/components/NetworkSelect.tsx +++ b/src/components/NetworkSelect.tsx @@ -1,6 +1,6 @@ /** @jsxImportSource @emotion/react */ import { useCallback, useState } from "react"; -import { Button, ButtonProps, Checkbox, Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material"; +import { Button, ButtonProps, Checkbox, Divider, ListItem, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material"; import { grey } from "@mui/material/colors"; import { BlurOn as AllIcon, ArrowDropDown } from "@mui/icons-material"; import { Theme, css } from "@emotion/react"; @@ -81,10 +81,10 @@ const checkboxStyle = css` left: 0; height: 65%; width: 1px; - background-color: ${grey[400]}; + background-color: rgba(0, 0, 0, .2); } - .MuiMenuItem-root:not(:hover) &::before { + .MuiMenuItem-root:not(:hover):not(:focus) &::before { display: none; } `; @@ -103,12 +103,6 @@ export const NetworkSelect = (props: NetworkSelectProps) => { const open = !!anchorEl; - const handleClose = useCallback(() => setAnchorEl(undefined), []); - - const handleClick = useCallback((event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }, []); - const setSelection = useCallback((networks: Network[]) => { const newValue = []; @@ -152,6 +146,26 @@ export const NetworkSelect = (props: NetworkSelectProps) => { onChange?.(newValue, true); }, [value, networkGroups, onChange]); + const handleClose = useCallback(() => setAnchorEl(undefined), []); + + const handleClick = useCallback((event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }, []); + + const handleItemClick = useCallback((network: Network, event: React.MouseEvent) => { + if ("key" in event && event.key === " ") { + if (value.includes(network)) { + removeSelection([network]); + } else { + addSelection([network]); + } + + return; + } + + setSelection([network]); + }, [value, addSelection, setSelection]); + console.log("value", value); @@ -228,7 +242,7 @@ export const NetworkSelect = (props: NetworkSelectProps) => { setSelection([network])} + onClick={(ev) => handleItemClick(network, ev)} >