cleanup RFContent, mild refactor, check for RF-items addition, deleti…

…on, specifically.
folio-org · Oct 28, 2024 · 21e9222 · 21e9222
1 parent 90ca131
commit 21e9222
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/lib/RepeatableField/RepeatableField.js b/lib/RepeatableField/RepeatableField.js
@@ -8,10 +8,10 @@ import Button from '../Button';
 import Headline from '../Headline';
 import EmptyMessage from '../EmptyMessage';
 import IconButton from '../IconButton';
-import { RepeatableFieldContent } from "./RepeatableFieldContent";
+import { RepeatableFieldContent } from './RepeatableFieldContent';
 import css from './RepeatableField.css';
-import { useFocusedIndex } from "./hooks/useFocusedIndex";
-import { useIsElementFocused } from "./hooks/useIsElementFocused";
+import { useFocusedIndex } from './hooks/useFocusedIndex';
+import { useIsElementFocused } from './hooks/useIsElementFocused';
 import { getFirstFocusable } from '../../util/getFocusableElements';
 
 const RepeatableField = ({
@@ -39,31 +39,27 @@ const RepeatableField = ({
   // use mutation observers to handle focus-management since we only have internal state.
   useEffect(() => {
     const observer = new MutationObserver(mutations => {
-      let rowElem;
-      // field additions - we only manage focus when focus is
-      // within the container...
-      if (rootRef.current.matches(':focus-within')) {
-        mutations.forEach((m) => {
-          if (m.type === 'childList') {
-            if (m.addedNodes?.length === 1) {
-              rowElem = m.addedNodes[0];
-              if (rowElem) {
-                getFirstFocusable(rowElem)?.focus();
-              }
-            }
-          }
-        });
-      }
-      // removals may or may not keep focus within the field list...
-      mutations.forEach((m) => {
-        if (m.type === 'childList') {
-          if (m.removedNodes.length === 1) {
-            rowElem = m.previousSibling;
-            if (rowElem) {
-              getFirstFocusable(rowElem)?.focus();
-            }
+      mutations.forEach(mutation => {
+        if (mutation.type !== 'childList') return;
+
+        const addedNode = mutation.addedNodes?.[0];
+        const removedNode = mutation.removedNodes?.[0];
+        let rowElem;
+        // Handle added node
+        if (rootRef.current.matches(':focus-within')) {
+          if (addedNode && addedNode.matches(`.${css.repeatableFieldItem}`)) {
+            rowElem = getFirstFocusable(addedNode);
+            rowElem?.focus();
           }
         }
+
+        // Handle removed node
+        if (removedNode &&
+          mutation.previousSibling &&
+          mutation.previousSibling.matches(`.${css.repeatableFieldItem}`)) {
+          rowElem = getFirstFocusable(mutation.previousSibling);
+          rowElem?.focus();
+        }
       });
     });
 

diff --git a/lib/RepeatableField/RepeatableFieldContent.js b/lib/RepeatableField/RepeatableFieldContent.js
@@ -1,7 +1,7 @@
-import React, { useCallback } from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import css from "./RepeatableField.css";
+import css from './RepeatableField.css';
 
 export const RepeatableFieldContent = ({ children }) => (
   <div className={css.repeatableFieldItemContent}>