diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index fe98ee8c772..e9888062f3f 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -156,7 +156,7 @@ export function SelectPanel({ onClose('selection') }, [finalItemsSelected, onSelectedChange, onClose, selected]) - const onCancelClickHandler = React.useCallback( + const onCloseOverlay = React.useCallback( (gesture?: 'anchor-click' | 'click-outside' | 'escape') => { setFinalItemsSelected(selectedItems) onClose(gesture ?? 'escape') @@ -164,6 +164,11 @@ export function SelectPanel({ [onClose, selectedItems] ) + const onCloseClickHandler = React.useCallback(() => { + setFinalItemsSelected(selectedItems) + onClose('escape') + }, [onClose, selectedItems]) + const inputRef = React.useRef(null) const titleId = useSSRSafeId() const focusTrapSettings = { @@ -196,7 +201,7 @@ export function SelectPanel({ anchorRef={anchorRef} open={open} onOpen={onOpen} - onClose={onCancelClickHandler} + onClose={onCloseOverlay} overlayProps={{...overlayProps, onKeyPress: overlayKeyPressHandler, role: 'dialog', 'aria-labelledby': titleId}} focusTrapSettings={focusTrapSettings} focusZoneSettings={focusZoneSettings} @@ -214,7 +219,7 @@ export function SelectPanel({ {title} - + - +