diff --git a/react-openapi/components/FilterBar.tsx b/react-openapi/components/FilterBar.tsx index 4e28b7e..a5d3a23 100644 --- a/react-openapi/components/FilterBar.tsx +++ b/react-openapi/components/FilterBar.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Box, Button, + Chip, Paper, TextField, Autocomplete, @@ -24,6 +25,7 @@ function FilterAutocomplete({ }) { const listboxRef = React.useRef(null); const scrollPosRef = React.useRef(0); + const [open, setOpen] = React.useState(false); const [frozenValue, setFrozenValue] = React.useState(value); const sortedOptions = React.useMemo(() => { @@ -42,13 +44,13 @@ function FilterAutocomplete({ multiple freeSolo disableCloseOnSelect - limitTags={1} + open={open} + onOpen={() => { setOpen(true); setFrozenValue(value); }} + onClose={() => { setOpen(false); setFrozenValue(value); }} options={sortedOptions} value={value} getOptionKey={(option) => option} onChange={(_, val) => onChange(val.length > 0 ? val : [])} - onOpen={() => setFrozenValue(value)} - onClose={() => setFrozenValue(value)} ListboxProps={{ ref: listboxRef, onScroll: (e) => { scrollPosRef.current = (e.target as HTMLUListElement).scrollTop; }, @@ -62,6 +64,32 @@ function FilterAutocomplete({ ); }} + renderTags={(tagValue, getTagProps) => { + const maxChips = 1; + return ( + <> + {tagValue.slice(0, maxChips).map((tag, index) => { + const { key, ...tagProps } = getTagProps({ index }); + return setOpen(true)} + sx={{ cursor: 'pointer' }} + />; + })} + {tagValue.length > maxChips && ( + setOpen(true)} + sx={{ cursor: 'pointer' }} + /> + )} + + ); + }} renderInput={(params) => } sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }} />