shouldReturnFocusAfterClose doesn't work in iOS Safari

[vladpopovv]

Summary:

The logic of shouldReturnFocusAfterClose doesn't work in iOS Safari

Environment info: iphone 11, iOS 14.4.1

Steps to reproduce:

1. Open the sandbox example in Safari on iOS
2. Open modal by clicking on the Open modal button
3. Close button by clicking on overlay space
4. Focus doesn't return to the button. The button should have red background because of the focused styles)

https://user-images.githubusercontent.com/22888266/112757520-ae0edf80-8ff2-11eb-99a9-68fa9019a30f.mp4

Expected behaviour:

The focus should return to the button. (In the sandbox example, the button should become red because of the focused styles)

Link to example of issue:

Sandbox: https://codesandbox.io/s/strange-joliot-k015k?file=/src/Modal.js:720-726 I've added focused styles to see when the button is focused(background: red)

Additional notes:

I've found a possible workaround to set the focus manually on closing modal by the button ref. How it works(expected behaviour of this bug):

https://user-images.githubusercontent.com/22888266/112757897-4ce80b80-8ff4-11eb-81ee-c4914d685f7e.mp4

You can find this workaround in the sandbox in commented code

[ruiLemosCode]

I can confirm this also happens on Safari on MacOS, so I think is universal to Safari

[galabra]

This is a known Safari iOS issue - where it doesn't allow focusing input and button elements

[diasbruno]

@galabra is right. Best we can do is use the onAfterClose callback to give to give the focus back to the element.