feat(ActionSheet, Alert): add stopPropagation ignore (#8166)

* fix(ActionSheet): add stopPropagation ignore * fix review notes
VKCOM · Jan 27, 2025 · 363b5cd · 363b5cd
1 parent 42260bd
commit 363b5cd
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 8 deletions.
diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx
@@ -261,4 +261,40 @@ describe(ActionSheet, () => {
     // desktop Android
     expect(screen.queryByText('Отмена')).toBeFalsy();
   });
+
+  describe('handle allowClickPropagation correctly', () => {
+    it.each([
+      ['menu', ActionSheetMenu],
+      ['sheet', ActionSheetSheet],
+    ])('%s', async (_name, ActionSheet) => {
+      const onClose = jest.fn();
+      const onClick = jest.fn();
+      const { rerender } = render(
+        <div onClick={onClick}>
+          <ActionSheet data-testid="container" onClose={onClose}>
+            <div data-testid="content" />
+          </ActionSheet>
+        </div>,
+      );
+      await waitForFloatingPosition();
+      act(jest.runAllTimers);
+
+      await userEvent.click(screen.getByTestId('content'));
+      expect(onClick).not.toHaveBeenCalled();
+
+      rerender(
+        <div onClick={onClick}>
+          <ActionSheet data-testid="container" onClose={onClose} allowClickPropagation>
+            <div data-testid="content" />
+          </ActionSheet>
+        </div>,
+      );
+
+      await waitForFloatingPosition();
+      act(jest.runAllTimers);
+
+      await userEvent.click(screen.getByTestId('content'));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
@@ -23,7 +23,10 @@ export interface ActionSheetOnCloseOptions {
 }
 
 export interface ActionSheetProps
-  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,
+  extends Pick<
+      SharedDropdownProps,
+      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'allowClickPropagation'
+    >,
     Omit<UseFocusTrapProps, 'onClose'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
   title?: React.ReactNode;

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx b/packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx
@@ -8,6 +8,7 @@ import { useEventListener } from '../../hooks/useEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useDOM } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
+import { stopPropagation } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { Popper } from '../Popper/Popper';
@@ -30,6 +31,8 @@ export const ActionSheetDropdownMenu = ({
   placement,
   onAnimationStart,
   onAnimationEnd,
+  allowClickPropagation = false,
+  onClick,
   ...restProps
 }: SharedDropdownProps): React.ReactNode => {
   const { document } = useDOM();
@@ -57,8 +60,6 @@ export const ActionSheetDropdownMenu = ({
     });
   }, [bodyClickListener, document]);
 
-  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);
-
   const targetRef = React.useMemo(() => {
     if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {
       return toggleRef;
@@ -67,6 +68,13 @@ export const ActionSheetDropdownMenu = ({
     return { current: toggleRef as HTMLElement };
   }, [toggleRef]);
 
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
   return (
     <Popper
       targetRef={targetRef}
@@ -86,7 +94,7 @@ export const ActionSheetDropdownMenu = ({
       onAnimationStart={onAnimationStart}
       onAnimationEnd={onAnimationEnd}
     >
-      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>
+      <FocusTrap onClose={onClose} {...restProps} onClick={handleClick}>
         {children}
       </FocusTrap>
     </Popper>

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx
@@ -4,12 +4,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
+import { stopPropagation } from '../../lib/utils';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import type { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
-const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
-
 export type ActionSheetDropdownProps = Omit<
   SharedDropdownProps,
   'popupDirection' | 'popupOffsetDistance' | 'placement'
@@ -21,15 +20,24 @@ export const ActionSheetDropdownSheet = ({
   // these 2 props are only omitted - ActionSheetDesktop compat
   toggleRef,
   className,
+  onClick,
+  allowClickPropagation = false,
   ...restProps
 }: SharedDropdownProps): React.ReactNode => {
   const { sizeY } = useAdaptivityWithJSMediaQueries();
   const platform = usePlatform();
 
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
   return (
     <FocusTrap
       {...restProps}
-      onClick={stopPropagation}
+      onClick={handleClick}
       className={classNames(
         styles.host,
         platform === 'ios' && styles.ios,

diff --git a/packages/vkui/src/components/ActionSheet/types.ts b/packages/vkui/src/components/ActionSheet/types.ts
@@ -20,4 +20,8 @@ export interface SharedDropdownProps extends FocusTrapProps {
    * Отступ, где заданное кол-во единиц равняется пикселям
    * */
   popupOffsetDistance?: number;
+  /**
+   * По умолчанию событие onClick не всплывает
+   */
+  allowClickPropagation?: boolean;
 }
diff --git a/packages/vkui/src/components/Alert/Alert.test.tsx b/packages/vkui/src/components/Alert/Alert.test.tsx
@@ -333,4 +333,32 @@ describe('Alert', () => {
       descriptionClassNames.forEach((className) => expect(textElement).toHaveClass(className));
     },
   );
+
+  it('handle allowClickPropagation correctly', async () => {
+    const onClose = jest.fn();
+    const onClick = jest.fn();
+    const action = {
+      'title': 'Item',
+      'data-testid': '__action__',
+      'autoCloseDisabled': true,
+      'mode': 'default' as const,
+    };
+    const result = render(
+      <div onClick={onClick}>
+        <Alert onClose={onClose} actions={[action]} />
+      </div>,
+    );
+
+    await userEvent.click(result.getByTestId('__action__'));
+    expect(onClick).not.toHaveBeenCalled();
+
+    result.rerender(
+      <div onClick={onClick}>
+        <Alert onClose={onClose} actions={[action]} allowClickPropagation />
+      </div>,
+    );
+
+    await userEvent.click(result.getByTestId('__action__'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/vkui/src/components/Alert/Alert.tsx b/packages/vkui/src/components/Alert/Alert.tsx
@@ -73,6 +73,10 @@ export interface AlertProps
    */
   dismissButtonTestId?: string;
   usePortal?: AppRootPortalProps['usePortal'];
+  /**
+   * По умолчанию событие onClick не всплывает
+   */
+  allowClickPropagation?: boolean;
 }
 
 /**
@@ -94,6 +98,8 @@ export const Alert = ({
   dismissButtonTestId,
   getRootRef,
   usePortal,
+  onClick,
+  allowClickPropagation = false,
   ...restProps
 }: AlertProps): React.ReactNode => {
   const generatedId = React.useId();
@@ -141,6 +147,13 @@ export const Alert = ({
 
   useScrollLock();
 
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
   return (
     <AppRootPortal usePortal={usePortal}>
       <PopoutWrapper
@@ -153,8 +166,8 @@ export const Alert = ({
         <FocusTrap
           {...restProps}
           {...animationHandlers}
+          onClick={handleClick}
           getRootRef={elementRef}
-          onClick={stopPropagation}
           onClose={close}
           autoFocus={animationState === 'entered'}
           className={classNames(