關閉表單動畫以避免同時渲染多頁 (#1448)

src/components/common/FormBuilder/AnimatedPager.js

@@ -7,18 +7,16 @@ import cn from 'classnames';
 import styles from './AnimatedPager.module.css';
 
 const AnimatedPager = ({ page, children, ...props }) => {
-  const [handleRef, { width: frameWidth }] = useMeasure();
+  const [handleRef] = useMeasure();
   return (
     <div ref={handleRef} className={cn(styles.frame, props.className)}>
-      {Children.map(children, ({ props: { children } }, i) => (
-        <div
-          key={i}
-          className={styles.page}
-          style={{ left: `${-frameWidth * page}px` }}
-        >
-          {children}
-        </div>
-      ))}
+      {Children.map(children, ({ props: { children } }, i) =>
+        i === page ? (
+          <div key={i} className={styles.page}>
+            {children}
+          </div>
+        ) : null,
+      )}
     </div>
   );
 };

src/components/common/FormBuilder/index.js

@@ -164,21 +164,6 @@ const FormBuilder = ({
     }
   }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Prevent tabbing within the modal so we don't jump between pages
-  // -- which is NOT ideal, as it's not a11y friendly.
-  //
-  // We will need to revisit this later after we are able to not render
-  // all questions at once but the active one only.
-  useEffect(() => {
-    if (!open) return;
-
-    const handler = e => {
-      if (e.key.toLowerCase() === 'tab') e.preventDefault();
-    };
-    window.document.addEventListener('keydown', handler);
-    return () => window.document.removeEventListener('keydown', handler);
-  }, [open]);
-
   if (!shouldRenderQuestion) {
     return null;
   }