Native form submission for useDateField / useTimeField when isRequired

[ixTec]

Is there any supported way of having a custom component using useDateField or useTimeField to use a valid input that blocks native form submission when required? We do not currently offer (nor have plans to offer) our own Form component, which I know we could probably use to solve this.

I saw #6151 which shows that these are the only two common input form components that don't currently support this behaviour out of the box with the hooks. Are there plans to address / review this further soon?

Right now I'm having to effectively mock this behaviour, using an unfocusable/aria-hidden input, with no width/height, which redirects focus onto the first DateSegment when it's programmatically focused.

Obviously this is less than ideal for the following reasons:

• Loses native browser prompts for incomplete inputs,
• Requires us to change the focus context, which is poor UX for accessibility tools like screenreaders
• Does not trigger validation on the individual inputs, such as validationDetails.valueMissing

[devongovett]

You could use an <input type="hidden"> for this. useDateField already returns an inputProps object that has props for this, so you just need to render <input {...inputProps}>

[ixTec]

Unfortunately this doesn't seem to work either, it's still disregarded when submitting a native form 😕

[devongovett]

hmm it should work. We use the same thing in React Aria Components, e.g. see this example: https://react-spectrum.adobe.com/react-aria/DateField.html#validation. You might want to check the code for it and compare with your implementation.

[ixTec]

I cannot see a related difference between my implementation using useDateField and the RAC DateField implementation.

From further testing, I now have it in a state where (I think) the browser tries to focus the input but is unable to because it's not focusable due to being hidden. I get the following console error:
An invalid form control with name='date-field' is not focusable. <input type=​"text" hidden required value>​…​</input>​ - though I can see that the react-aria example on the docs site does not get this error

[ixTec]

Turns out I was missing the inputRef for the hidden input, so it could never be focused by the logic in the use[Time/Date]Field hooks.

I feel like this functionality could be better reflected in the docs for the React Aria hooks?

[snowystinger]

Looks like inputRef is marked as optional, that's probably from before the form work was done. We can't make it required unless we do a breaking change. Documentation update may be the way to tide us over for now, though I'm not thrilled about it.

@devongovett got any ideas that might allow us to keep it as optional? We might be able to look up the input element in the dom because useDateField has a required ref.

This is going to be problematic whenever we try to do strictmode for this as useFormReset requires the ref while useDateField does not.