Fixes autofocus behavior in dataform panel views (dropdown and modal) to focus on the first form input field.

Problem

When opening a dataform panel view (either as a dropdown or modal), the inputs were not automatically focused. Relying on the the artifacts we had like focusOnMount flag, or useFocusOnMount did not proved to be a reliable solution because some unexpected ellements may ended focused like:

• The "Close" button in the panel header
• Links in field descriptions (e.g., "Learn more" link in the Parent field)
• Other non-input interactive elements
  This resulted in poor user experience as users had to manually tab or click to reach the actual input field they wanted to edit.

Solution

Created a custom focus management hook useFocusOnFormInput that:

1. Prioritizes form inputs: Queries for input, select, and textarea elements (excluding hidden/disabled)
2. Skips non-input elements: Close buttons, links, and other tabbable elements are bypassed
3. Fallback mechanism: If no form input is found, falls back to the first focusable element, similar to useFocusMount
4. Prevents layout shifts: Uses preventScroll: true to avoid visual jumps as useFocusMount does.

After

• First input field is automatically focused when opening panel views
• Links and buttons in field descriptions are skipped
• Consistent behavior across dropdown and modal panel views

Technical Implementation

New Hook: useFocusOnFormInput

Created a new shared hook at packages/dataviews/src/dataform-layouts/panel/use-focus-on-form-input.ts that follows the same pattern as WordPress's useFocusOnMount hook:

Key Features:

• Uses useRefEffect for ref-based focus management
• Implements setFocus helper with preventScroll: true
• Uses setTimeout(0) to ensure components are fully rendered before focusing
• Custom selector: 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled])'
• Falls back to focus.tabbable.find() if no form inputs found

Hook Structure:

export default function useFocusOnFormInput() {
  const setFocus = (target) => target.focus({ preventScroll: true });
  const timerIdRef = useRef();

  return useRefEffect((node) => {
    // Skip if node already contains focus
    if (node.contains(node.ownerDocument?.activeElement)) return;

    // Priority 1: Form inputs
    const formInput = node.querySelector('input:not([type="hidden"]):not([disabled]), ...');
    if (formInput) return setFocus(formInput);

    // Priority 2: First focusable element
    const firstFocusable = focus.tabbable.find(node)[0];
    if (firstFocusable) setFocus(firstFocusable);
  }, []);
}

Testing Instructions

Manual Testing

• Run the storybook, go to http://localhost:50240/?path=/story/dataviews-dataform--layout-panel&args=openAs:modal, verify that both as modal and as dropdown the first input field gets focused
• Go to /wp-admin/site-editor.php?p=%2Fpage&quickEdit=true&postId try the quick edit for pages and verify the focus behavior is correct.