Merge branch 'feat/side-search-tab-index' into alpha

gisce · Feb 13, 2025 · bd9cdf6 · bd9cdf6
2 parents 42931a3 + 1957c37
commit bd9cdf6
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "antd": "5.13.1",
     "buffer": "^6.0.3",
     "file-type-buffer-browser": "git+ssh://[email protected]/mguellsegarra/file-type-buffer-browser.git",
+    "focus-trap-react": "^11.0.3",
     "framer-motion": "^11.5.5",
     "interweave": "^13.0.0",
     "md5": "^2.3.0",

diff --git a/src/ui/FloatingDrawer.tsx b/src/ui/FloatingDrawer.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Typography, Button, Layout, theme } from "antd";
 import { CloseOutlined } from "@ant-design/icons";
+import FocusTrap from "focus-trap-react";
 
 const { useToken } = theme;
 const { Title } = Typography;
@@ -97,58 +98,68 @@ export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
             }}
             onClick={handleOverlayClick}
           />
-          <motion.div
-            ref={drawerRef}
-            initial={{ x: "100%" }}
-            animate={{ x: 0 }}
-            exit={{ x: "100%" }}
-            transition={{ type: "spring", stiffness: 300, damping: 30 }}
-            onAnimationComplete={handleAnimationComplete}
-            style={{
-              position: "fixed",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              width: "500px",
-              backgroundColor: "white",
-              boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
-              zIndex: 1000,
-              display: "flex",
-              flexDirection: "column",
+          <FocusTrap
+            active={isOpen}
+            focusTrapOptions={{
+              initialFocus: "#floating-drawer-overlay input",
+              allowOutsideClick: true,
+              returnFocusOnDeactivate: true,
             }}
           >
-            <Header style={headerFooterStyle}>
-              <Title level={3} style={{ margin: 0, flex: 1 }}>
-                {title}
-              </Title>
-              <Button
-                type="text"
-                icon={<CloseOutlined />}
-                onClick={onClose}
-                aria-label="Close"
-              />
-            </Header>
-            <Content
+            <motion.div
+              ref={drawerRef}
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+              onAnimationComplete={handleAnimationComplete}
+              id="floating-drawer-overlay"
               style={{
-                flex: 1,
-                overflowY: "auto",
+                position: "fixed",
+                top: 0,
+                right: 0,
+                bottom: 0,
+                width: "500px",
+                backgroundColor: "white",
+                boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
+                zIndex: 1000,
+                display: "flex",
+                flexDirection: "column",
               }}
             >
-              {children}
-            </Content>
-            {footer && (
-              <Footer
+              <Header style={headerFooterStyle}>
+                <Title level={3} style={{ margin: 0, flex: 1 }}>
+                  {title}
+                </Title>
+                <Button
+                  type="text"
+                  icon={<CloseOutlined />}
+                  onClick={onClose}
+                  aria-label="Close"
+                />
+              </Header>
+              <Content
                 style={{
-                  ...headerFooterStyle,
-                  borderTop: "1px solid #f0f0f0",
-                  borderBottom: "none",
-                  height: "72px",
+                  flex: 1,
+                  overflowY: "auto",
                 }}
               >
-                {footer}
-              </Footer>
-            )}
-          </motion.div>
+                {children}
+              </Content>
+              {footer && (
+                <Footer
+                  style={{
+                    ...headerFooterStyle,
+                    borderTop: "1px solid #f0f0f0",
+                    borderBottom: "none",
+                    height: "72px",
+                  }}
+                >
+                  {footer}
+                </Footer>
+              )}
+            </motion.div>
+          </FocusTrap>
         </>
       )}
     </AnimatePresence>

diff --git a/src/widgets/views/searchFilter/SideSearchFilter.tsx b/src/widgets/views/searchFilter/SideSearchFilter.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Form, Alert, Button, FormInstance } from "antd";
+import { Form, Button, FormInstance } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { SearchOutlined, ClearOutlined } from "@ant-design/icons";
 
@@ -83,7 +83,7 @@ export const SideSearchFilterComponent = forwardRef<any, SideSearchFilterProps>(
               }}
             >
               <div style={{ paddingLeft: 18, paddingRight: 18 }}>
-                <SearchField key={j} field={item as Field} />
+                <SearchField key={`sf-${i}-${j}`} field={item as Field} />
               </div>
             </div>
           );
@@ -136,6 +136,15 @@ export const SideSearchFilter = (props: SideSearchFilterContainerProps) => {
       return;
     }
     setSearchParams(undefined);
+    // Focus the first input after the drawer animation completes
+    setTimeout(() => {
+      const firstInput = document.querySelector(
+        "#floating-drawer-overlay input",
+      );
+      if (firstInput instanceof HTMLElement) {
+        firstInput.focus();
+      }
+    }, 300);
   }, [isOpen]);
 
   useDeepCompareEffect(() => {