fix : After selecting year/month datepicker getting closed in IOS

[akshat-angelone057]

In IOS select tag looses focus, since its default behaviour of IOS safari to focus out from select tag once the option is selected.

so here we focus on wrapper div of select tag, this makes wrapper div as the related target in the onFocusOut event, and visible still remains true

[akshat-angelone057]

@probablykasper please have a look at this PR

[probablykasper]

This messes with the focus behavior:

Screen.Recording.2024-02-26.at.16.02.15.mov

[akshat-angelone057]

@probablykasper fixed please check now

[probablykasper]

The issue is that the <select>'s outline is gone and that it breaks keyboard accessibility. I think this also is an issue for screen readers if <select> isn't focused

[akshat-angelone057]

The issue is that the <select>'s outline is gone and that it breaks keyboard accessibility. I think this also is an issue for screen readers if <select> isn't focused

got your point let me work on it

[probablykasper]

imo it should be looked into if there's a decent way to keep the <select> focused

[akshat-angelone057]

@probablykasper so i did bit of research like what can be the done to keep select focus but it seems there is no proper way to do it other than using setTimeout.
seems relatedTarget being null is not yet solved in safari Mobile (earlier it was there in firefox too)- facebook/react#2011

there are ways to get relatedTarget but we will have to give tabIndex = "0" to wrapper divs of select tags

can we handle this case specific to iphone and ipad so that existing a11y remain unaffected? because anyways a11y seems broken in the case of iphone and ipad as datepicker itself is closing after selecting month/year

[probablykasper]

Yes it can be iOS-specific