PDF Editor: Allow users to include excluded fields with another delete press (#699)

Author: mbbischoff

docs/src/content/docs/guides/new-pdfs.mdx

@@ -53,6 +53,8 @@ Some fields, like internal bureaucratic coding, will never be filled in by a Nam
 
 To exclude a field using the PDF Manager, select the field name from the list and press `Delete` or `Backspace`. Excluded fields will appear at the bottom of the list with a strikethrough. Click **Save** to write all exclusions to disk.
 
+To restore an excluded field, select it from the **Excluded** list and press `Delete` or `Backspace` again. It will move back into the active field list. Click **Save** to write the restored fields to disk.
+
 ## Rename remaining fields
 
 Once unused fields have been excluded, the remaining fields should be renamed. We rename fields to make it easier to work with PDFs, and because the default names are often undescriptive.

pdf-manager/src/components/FieldList.tsx

@@ -211,6 +211,7 @@ export function FieldList({
     height: number;
   } | null>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const excludedListRef = useRef<HTMLDivElement>(null);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const focusList = () => setTimeout(() => listRef.current?.focus(), 0);
@@ -250,7 +251,12 @@ export function FieldList({
   // Capture phase so Delete/Backspace/Enter reach us before RAC's type-ahead and activation handlers.
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
-      if (!listRef.current?.contains(document.activeElement)) return;
+      const activeElement = document.activeElement;
+      const listHasFocus =
+        activeElement &&
+        (listRef.current?.contains(activeElement) ||
+          excludedListRef.current?.contains(activeElement));
+      if (!listHasFocus) return;
       if (renamingField) return;
       if ((e.key === "Delete" || e.key === "Backspace") && highlightedField) {
         e.preventDefault();
@@ -316,6 +322,7 @@ export function FieldList({
           <div className="field-excluded-group">
             <div className="field-section-label">Excluded</div>
             <ListBox
+              ref={excludedListRef}
               aria-label="Excluded fields"
               className="field-list field-list-excluded"
               selectionMode="single"