From 067469aa98dd099b4505778a0e4a216cf9195629 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 23 Dec 2024 09:56:58 +0000
Subject: [PATCH] fix(component): prevent auto focus in mobile modal (#9247)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Continue [BS-2169](https://linear.app/affine-design/issue/BS-2169/新的-menu-不支持移动端)
---
 .../src/ui/date-picker/calendar/calendar.css.ts    |  8 ++++----
 .../frontend/component/src/ui/menu/mobile/root.tsx |  1 +
 packages/frontend/component/src/ui/modal/modal.tsx | 14 ++++++++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
index c1854f681..edc4fc808 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
+++ b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
@@ -46,18 +46,18 @@ export const focusInteractive = style([
   basicInteractive,
   {
     selectors: {
-      ':not([data-mobile="true"]) &::before': {
+      '&::before': {
         opacity: 0,
         boxShadow: `0 0 0 2px ${cssVar('brandColor')}`,
       },
-      ':not([data-mobile="true"]) &::after': {
+      '&::after': {
         border: '1px solid transparent',
       },
 
-      ':not([data-mobile="true"]) &:focus-visible::before': {
+      '&:focus-visible::before': {
         opacity: 0.5,
       },
-      ':not([data-mobile="true"]) &:focus-visible::after': {
+      '&:focus-visible::after': {
         borderColor: cssVar('brandColor'),
       },
     },
diff --git a/packages/frontend/component/src/ui/menu/mobile/root.tsx b/packages/frontend/component/src/ui/menu/mobile/root.tsx
index e1530ff84..d5f731f41 100644
--- a/packages/frontend/component/src/ui/menu/mobile/root.tsx
+++ b/packages/frontend/component/src/ui/menu/mobile/root.tsx
@@ -130,6 +130,7 @@ export const MobileMenu = ({
             className: clsx(className, styles.mobileMenuModal),
             ...otherContentOptions,
           }}
+          disableAutoFocus={true}
         >
           <div
             ref={setSliderElement}
diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index fe33eedfc..8452c9893 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -53,6 +53,7 @@ export interface ModalProps extends DialogProps {
    * Whether to show the modal in full screen mode
    */
   fullScreen?: boolean;
+  disableAutoFocus?: boolean;
 }
 type PointerDownOutsideEvent = Parameters<
   Exclude<DialogContentProps['onPointerDownOutside'], undefined>
@@ -83,7 +84,7 @@ class ModalTransitionContainer extends HTMLElement {
       this.requestTransition();
       return child;
     } else {
-      // eslint-disable-next-line unicorn/prefer-dom-node-remove
+      // oxlint-disable-next-line unicorn/prefer-dom-node-remove
       return super.removeChild(child);
     }
   }
@@ -105,7 +106,7 @@ class ModalTransitionContainer extends HTMLElement {
       });
       startScopedViewTransition(styles.modalVTScope, () => {
         nodes.forEach(child => {
-          // eslint-disable-next-line unicorn/prefer-dom-node-remove
+          // oxlint-disable-next-line unicorn/prefer-dom-node-remove
           super.removeChild(child);
         });
       });
@@ -163,6 +164,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       contentWrapperStyle,
       animation = BUILD_CONFIG.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
       fullScreen,
+      disableAutoFocus,
       ...otherProps
     } = props;
     const { className: closeButtonClassName, ...otherCloseButtonProps } =
@@ -208,6 +210,13 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       [onEscapeKeyDown, persistent]
     );
 
+    const handleAutoFocus = useCallback(
+      (e: Event) => {
+        disableAutoFocus && e.preventDefault();
+      },
+      [disableAutoFocus]
+    );
+
     if (!container) {
       return;
     }
@@ -249,6 +258,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
                 onPointerDownOutside={handlePointerDownOutSide}
                 onEscapeKeyDown={handleEscapeKeyDown}
                 className={clsx(styles.modalContent, contentClassName)}
+                onOpenAutoFocus={handleAutoFocus}
                 style={{
                   ...assignInlineVars({
                     [styles.widthVar]: getVar(