Support for options in .focus()
benoitgrelard opened this issue · comments
Hey @theKashey, I am looking at adding support for focus options when calling .focus()
in returnFocus
.
See here: https://github.com/theKashey/react-focus-lock/blob/master/src/Lock.js#L60
The reason for that is that currently when the focus gets returned, if the page has been scrolled down and the element supposed to receive the focus back is not in view anymore, the browser will scroll to reveal that element being focused.
I understand that setting the returning the focus is absolutely important for accessibility and I wouldn't change that. However, it can be a bit disorientating for users to be scrolled to a difference place for what seems to be no apparent reason (to them).
Most latest browsers actually support an option to disable that behaviour if needed.
See the preventScroll
option (false
by default) on mdn.
Here's the current support for it.
I think support is not too much of an issue as this can be seen as an enhancement anyway.
I actually need this feature as part of react-focus-on
but I know the code for the returnFocus
handler actually lives in react-focus-lock
.
Would you be willing to add a new prop returnFocusOptions
to support that optional behaviour?
If so, I can draft you a PR today.
Let me know!
✌️
Drilling a new prop thought all components would be not super easy, however - do we need a new prop?
returnFocus=false
do not return focusreturnFocus=true
return focusreturnFocus="smooth"
(however, sounds weird) - this behavior.returnFocus="preventScroll"
sounds less weird, but is too concrete.
Any other ideas in mind?
That's true, it could work with the one prop.
I agree "smooth"
sounds weird.
Another option to be even more future proof (which is what I was trying to do with another prop) could be:
returnFocus={false}
do not return focusreturnFocus={true}
return focusreturnFocus={{ preventScroll: true }}
wanted behaviour (but could also support other options in the future)returnFocus={{ preventScroll: false }}
equivalent to 2.
Essentially, returnFocus
could accept a boolean, or focus options.
What do you think?
I like it! That's the real future proof solution!
Great, I'll draft a PR then. 👍
@theKashey here's the PR: #84
Not yet released
- RFL -
2.1.0
- RFO -
3.1.0
Just released
🙏 awesome
There seem to be focus-options-polyfill for edge/safari