Bug 275612 – Hidden datetime input with valid value raises: An invalid form control with name= is not focusable.

• Status: NEW
• Component: Forms

Add the following input to a form:

<input min="2024-06-18T15:50:00" max="2024-06-23T15:50:00" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" data-value="2024-06-18T15:50" type="datetime-local" name="notification[send_at]" id="notification_send_at">

Then wrap it inside a <fieldset style="display: none;"> (not that the fieldset is not visible to the user).

When you try to submit the form by clicking the form submit button, the button doesn't work and you get this error in console:

> An invalid form control with name='notification[send_at]' is not focusable.

NOTE: the message is wrong, because the form control is in a valid state, as you can see in the code above.

If you prefer to reproduce this bug on a real website you can also try this:

1. Sign up for a free account on Pushpad (https://pushpad.xyz) and create a new project in the dashboard
2. Navigate to that project and click New notification
3. Click Add schedule
4. Click Remove schedule
5. Click Send

The Send button doesn’t work and you get this error in console... "An invalid form control with name='notification[send_at]' is not focusable."

Everything works fine in all other browsers including Chrome and Firefox. This seems like a major Safari bug because it prevents the form submission.

[Aditya Keerthi]

Thanks for the report!

Leaving a note here that the error message is from `ValidatedFormListedElement::reportNonFocusableControlError` in the WebKit code.

[Karl Dubost]

and called from https://searchfox.org/wubkat/rev/15ad704057e0d342d10b792f6108eaeed7accbd7/Source/WebCore/html/HTMLFormElement.cpp#211-243
bool HTMLFormElement::validateInteractively()

it checks 
```
    // Focus on the first focusable control and show a validation message.
    bool shouldFocus = true;
    for (auto& control : unhandledInvalidControls) {
        if (auto validationAnchor = control->focusableValidationAnchorElement()) {
            if (shouldFocus) {
                shouldFocus = false;
                control->focusAndShowValidationMessage(validationAnchor.releaseNonNull());
            }
        } else
            control->reportNonFocusableControlError();
    }
```

also called from https://searchfox.org/wubkat/rev/15ad704057e0d342d10b792f6108eaeed7accbd7/Source/WebCore/html/ValidatedFormListedElement.cpp#131-149
bool ValidatedFormListedElement::reportValidity()

it checks:
```
    asHTMLElement().protectedDocument()->updateLayoutIgnorePendingStylesheets();
    if (auto validationAnchor = focusableValidationAnchorElement())
        focusAndShowValidationMessage(validationAnchor.releaseNonNull());
    else
        reportNonFocusableControlError();

    return false;
}
```

[Radar WebKit Bug Importer]

<rdar://problem/130502703>

This is a major issue and I see that it also affects other types of input, not just datetime.

Many forms don't work due to this bug in safari. Other browsers like Chrome and Firefox work properly.

Please fix this issue