feat(Table): close table actions popup after click (#1546)

gravity-ui · Apr 23, 2024 · 0ab21bb · 0ab21bb
1 parent 41cc3a5
commit 0ab21bb
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -4,6 +4,7 @@ import {Ellipsis} from '@gravity-ui/icons';
 import _memoize from 'lodash/memoize';
 
 import {useUniqId} from '../../../../hooks';
+import {useBoolean} from '../../../../hooks/private';
 import type {PopperPlacement} from '../../../../hooks/private';
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
@@ -112,7 +113,7 @@ const DefaultRowActions = <I extends TableDataItem>({
     rowActionsSize,
     isRowDisabled,
 }: DefaultRowActionsProps<I>) => {
-    const [open, setOpen] = React.useState(false);
+    const [isPopupOpen, , closePopup, togglePopup] = useBoolean(false);
     const anchorRef = React.useRef<HTMLButtonElement>(null);
     const rowId = useUniqId();
 
@@ -137,6 +138,8 @@ const DefaultRowActions = <I extends TableDataItem>({
                 onClick={(event) => {
                     event.stopPropagation();
                     handler(item, index, event);
+
+                    closePopup();
                 }}
                 iconStart={icon}
                 className={menuItemCn}
@@ -158,10 +161,10 @@ const DefaultRowActions = <I extends TableDataItem>({
     return (
         <div className={actionsCn}>
             <Popup
-                open={open}
+                open={isPopupOpen}
                 anchorRef={anchorRef}
                 placement={DEFAULT_PLACEMENT}
-                onOutsideClick={() => setOpen(false)}
+                onOutsideClick={closePopup}
                 id={rowId}
             >
                 <Menu className={menuCn} size={rowActionsSize}>
@@ -171,13 +174,13 @@ const DefaultRowActions = <I extends TableDataItem>({
             <Button
                 view="flat-secondary"
                 className={actionsButtonCn}
-                onClick={() => setOpen(!open)}
+                onClick={togglePopup}
                 size={rowActionsSize}
                 ref={anchorRef}
                 disabled={disabled}
                 extraProps={{
                     'aria-label': i18n('label-actions'),
-                    'aria-expanded': open,
+                    'aria-expanded': isPopupOpen,
                     'aria-controls': rowId,
                 }}
             >