Open TahimiLeonBravo opened 4 years ago
Hi, I would like to work on this issue 😄
Great!, you can submit a pull request
Hi @TahimiLeonBravo ! I was looking to reproduce the issue, but I can't make it happen. Can you give me more info about how you lost the focus?
My OS Windows 10
What I do?
I run on localhost:6060
the project, on Mozila firefox and the focus of the component Modal
returns to the button.
Let me know if I need to do something else to reproduce the problem 😄
Seems this is happening in macOS with Mozilla and Safari
Hi, I made a PR with the changes, I had some problems at the moment of making the push because some warnings on the code that I don't made, so let me know if it's ok! 😄
Update: I found that document.activeElement
doesn't work on iOS, it returns body
that's the reason why the focus gets lost.
We can use event.target
but that will work through handleOnClick()
not on the component Modal.
I tried with document.querySelector()
but don't work for this.
Do you have any suggestions about how to access from componentDidUptadate
?
@Charlitos96 I think we should follow this: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html note that in these examples returning the focus to trigger element works perfectly in all browsers, also here you can see its source code https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
Hello,
Following the pattern from the link, they pass the reference of the element that triggered the Modal using openModal('dialog1',this)
.
Using that as a guide, I update the method handleOnClick()
to pass the reference of the button with event.target
to update modalTriggerElement
with it.
If this was not the approach you suggested please let me know. 😄
Hello, I can't keep working on this, the problem is with the way that Mac handle the focus, not on the code. I hope anyone can find another solution.
Requirements:
We should follow this spec: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
Note: This behavior is working well on Chrome, it should be work in the same way on Firefox and Safari.