diff --git a/next-docs/public/examples/combobox/Default.tsx b/next-docs/public/examples/combobox/Default.tsx index f0a88d77b7..d5c7012cd5 100644 --- a/next-docs/public/examples/combobox/Default.tsx +++ b/next-docs/public/examples/combobox/Default.tsx @@ -35,6 +35,27 @@ const Example = () => { const filteredPeople0 = filter(query0, people); const filteredPeople1 = filter(query1, people); + const onClose0 = (value: undefined) => { + const v = value as unknown; + console.log('State on close:'); + for (const [key, val] of Object.entries(v as Object)) { + console.log(`${key}: ${val}`); + } + } + + const onClose1 = (value: undefined) => { + const v = value as unknown; + if (v === null) { + console.log('State on close: nothing is selected'); + } else { + console.log('State on close:'); + for (const [key, val] of Object.entries(v as Object)) { + console.log(`${key}: ${val}`); + } + } + } + + return (
{ > {({ open }) => ( <> - + { > {({ open }) => ( <> - + >(({ children, className, innerLabel, + open, + onClose, }, ref ) => { - const { size, input, popper, disabled, isError } = + const { value, size, input, popper, disabled, isError } = useComboboxContext('Combobox.Trigger'); + const [isOpened, setIsOpened] = useState(open); + + useEffect(() => { + if (open !== isOpened) { + !open && onClose && onClose(value as undefined); + setIsOpened(open); + } + }, [open, value]); + return (
void; }; export default SelectProps