onBlur / onFocus usage with useDateField

[jake-chapman-mark43]

We have someone using our DateInput and DateRate which uses the associated spectrum hooks. Spreading {...fieldProps} onto DateField which is passing all props into appropriate hooks. We've noticed that majority of default event handlers like onBlur onFocus etc all get stripped. At first I thought it was a prop spreading issue. But after some logical thinking and working on it I realized it kind of made sense since there are no "text inputs" per say, but we do have editable segments that do receive onFocus and onBlur events. I can add these manually to <segment> but they are fired off for each individual segment of the component being showed based on props.

They're needing to save the value to the database when the user has selected a date, what's an appropriate way to handle onBlur for something like DateInput/DateRange since there isn't a 'single' event for those but will be firing off multiple times?

[snowystinger]

I think useDateField will handle this for you? https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/datepicker/src/useDateField.ts#L66 is it not? and can you provide a codesandbox? might be easier to take a look at something reproducing it

[jake-chapman-mark43]

Don't think this is working as intended. Appears the onBlurWithin just isn't getting called.

Copied over one of the examples from docs: https://codesandbox.io/s/recursing-montalcini-fkdbhf

[snowystinger]

seems like a bug, opened here #4324
thanks for the sandbox!

[LFDanLu]

Looks like the packages needed to be updated, seems to work after bumping to latest: https://codesandbox.io/s/beautiful-breeze-ebvzit

[rdangol1]

Adding to this when we click directly below outside of the date field the focus moves.
CodeSandbox: https://codesandbox.io/s/cocky-leavitt-ylsh6c?file=/src/App.js
recording:

Screen.Recording.2023-05-31.at.3.37.45.PM.mov

[LFDanLu]

That behavior is discussed here: #3164 (thanks @snowystinger for digging that up for me), looks to be related to contentEditable. That issue has some proposed fixes in the replies that you can check out.