fix(component): prevent auto focus in mobile modal (#9247)

Continue [BS-2169](https://linear.app/affine-design/issue/BS-2169/新的-menu-不支持移动端)
toeverything · Dec 23, 2024 · 067469a · 067469a
1 parent ba355d0
commit 067469a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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(