adobe
FocusManager.focusNext() Not working properly.
Provide a general summary of the issue here
Im trying to build a date range picker using react aria components. In my usecase i need to show DateInput at trigger place and in dailouge too. But the next focus behaviour on date change is working properly at trigger level, but at popover level the popover getting closed automatically.
🤔 Expected Behavior?
I should be able to add date input in dialouge too by not closing dialouge on date change.
😯 Current Behavior
On date change popover getting closed automatically
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/react-spectrum-range-picker-rgc5c9?file=%2Fsrc%2FDateTimePicker.tsx%3A48%2C12-48%2C21
Version
3.12.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Ubuntu 22.04
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
We thank you for your patience. We will get to your issue as soon as we are able.
Probably have to block a bunch of contexts that we send down to all the components inside a date range picker and just create a date range field inside.
For what it's worth, I'm not seeing any issues with Tabbing. Do you have more specific steps to reproduce?
This is more what I'd expect:
<DateRangePicker>
<Label>Trip dates</Label>
<Group>
<DateInput slot="start">
{(segment) => <DateSegment segment={segment} />}
</DateInput>
<span aria-hidden="true">–</span>
<DateInput slot="end">
{(segment) => <DateSegment segment={segment} />}
</DateInput>
<Button>▼</Button>
</Group>
<Popover>
<Dialog>
<BlockVariousContext> // move this wherever needed?
... Create a DateRangeField? two DateFields? this way there are no additional popovers and overlay state
... Maybe a DateRangePicker that can't be opened?
... or does this even need to be an editable area?
</BlockVariousContext>
<RangeCalendar>
<header>
<Button slot="previous">◀</Button>
<Heading />
<Button slot="next">▶</Button>
</header>
<CalendarGrid>
{(date) => <CalendarCell date={date} />}
</CalendarGrid>
</RangeCalendar>
</Dialog>
</Popover>
</DateRangePicker>
Can you elaborate on how to block context? and what are the contexts that need to be blocked to make this work as expected?
Sure, the contexts that are used are listed here https://react-spectrum.adobe.com/react-aria/DateRangePicker.html#custom-children
And you clear/block them by creating a new context provider for that context and set its value to null
Thanks for the quick response, I have tried setting the context to null but still getting the same issue. You can check the implementation here - https://codesandbox.io/p/sandbox/react-spectrum-range-picker-forked-74nls7?file=%2Fsrc%2FDateTimePicker.tsx
Sure, the contexts that are used are listed here https://react-spectrum.adobe.com/react-aria/DateRangePicker.html#custom-children And you clear/block them by creating a new context provider for that context and set its value to
null
How this is related to context, focus manager should get next focusable element and it should transfer the focus right?
Again, I'm not really sure what you're referring to. I cannot reproduce your described issue
For what it's worth, I'm not seeing any issues with Tabbing. Do you have more specific steps to reproduce?
As for why the context clearing might help, my understanding was that the popover was closing unexpectedly. If you have something using the overlay state context, such as a second date range picker, then it may be calling set close on that state accidentally.
Steps to reproduce,
- In that code sandbox output open date range picker dialouge by clicking on chevron icon (trigger).
- There youll find a date segment.
- Try to enter a complete date that is date, month, year (or any order but all values has to be filled). After entering a valid date in date segment the dialouge will get closed automatically. which is unexpected.
if you're able to enter complete date (date month year) by not closing dialouge please gimme a gif of it.
https://github.com/user-attachments/assets/ac20b691-8a6a-4cca-be57-a967a896bbda
This is the result im getting im using ubuntu Ubuntu 22.04.3 LTS chrome latest version
can you please tell me where you are testing
I've checked it in Chome 127.0.6533.120 (Official Build) (arm64) On MacOS 14.5.0 Still im getting the issue
@snowystinger did you fork my codesandbox and did any changes to that or you're just testing in my codesandbox? as im still getting the issue i dont know how its happening and how do you able to enter total year in input at a time means instead of 2,0,2,4 im seeing 2024 directly in single change how its happend?
Ah, I see, I was using the arrow keys to quickly fill in a date. Trying to type it out causes the popover to close.
No, we've not had time to dive into it. The fastest way to get an update on it is to start debugging more on your own. Otherwise, it'll be when we have time and decide it's a priority. Given that this is a pretty unusual use case, I don't think it'll be high on our priorities for quite some time.
Thanks for understanding.
@snowystinger We are facing this issue only in date range picker but not in date picker, are there any insights to debug this? This happening only when we keep a date field inside a calendar popover?
I'd track focus in the focus scope, check where events are bubbling and see if the focusNext is being called on a non-existent element for starters