[useDateRangePicker] how to prevent autofocus on closeButton in dateField?

[ananassta]

There is a problem i found while working with this hook (useDateRangePicker). After entering the date, the focus is automatically transferred to the clear button, located inside the input field. What can be done about it?

Referring to the hook code, I found that the lack of focus transfer to the calendar button is spelled out directly. Can we expand this function for custom buttons passed inside the field?

[snowystinger]

The button that line refers to is the popover button, not the clear button. I'm not sure where that clear button is coming from, we don't have it in any of our examples that I see.

You could make the clear button non-tabbable, using tabIndex = -1. But you'll need to provide a keyboard accessible way to also clear the field. Usually 'Escape' is good for this. This is probably the best approach.

If that doesn't work, you could try some of these other solutions.

You could move the clear button to outside of the field, or, soon, rely on Form 'reset' behavior.

If you wanted the clear button to look like it was inside, but be the last tabbable element in the component, you could possibly use CSS 'order', though that may be confusing to users who are sighted as it would appear that focus is jumping around out of order.

[ananassta]

This button is really not in your example. It's a custom solution from our designers.
Probably, the question is that in the case of using "useDatePicker" there is no such problem with focus and the focus remains on the date, while here it moves further to the button.

[snowystinger]

The reason behind the difference is that filling in the fields will automatically advance the cursor from segment to segment. This works differently in the range picker because there are two date fields, so we need to be able to advance from the first one to the second one. Currently we do that by just checking to make sure we aren't advancing to the button as you've found. Instead, we think that we could check for spinbuttons or textboxes when trying to advance the cursor instead of just !button. Would you be interested in opening a PR?

[ananassta]

Do you want me to send a pull request to the library?
The only idea I have is to extend the hook's props with the IDs of the elements that should be ignored by the focus and then use them in createFocusManager.

[snowystinger]

Sending a PR is the fastest way to get a bug fixed. Otherwise you'll have to tolerate our priorities a bit more.
The idea I shared was:

We think that we could check for spinbuttons or textboxes when trying to advance the cursor instead of just !button

So that accept function would look more like (psuedo-ish code)

accept: (node) => node.role === 'spinbutton' || node.role === 'textbox'

[tgelu]

Just want to add that there is an example in the docs which suffers from the same issue.

Here you showcase a clear button which gets focused when last year is set https://react-spectrum.adobe.com/react-aria/DateRangePicker.html#state