react-focus-lock
react-focus-lock copied to clipboard
FocusLock autoFocus={false} not working when outside component do ref.focus
In my case we use FocusLock and AutoFocusInside for dialog.
<AutoFocus> <AutoFocusInside> xxx </AutoFocusInside> </AutoFocus>
in some cases like opening dialog by clicking the dropdown menu item, while the dialog is rendering, menu will also do some sth like ref.focus.
In this case, autoFocus={false} not working, it will still focus the first available element.
I tried the disabled props in AutoFocusInside, also not working
-
AutoFocusInside
is marking something inside it as 'focus if there is no other option'.- activated only if focus initially not inside the Lock
-
MoveFocusInside
is a command, moves focus to the first focusable inside it on mount
Can you clarify the desired behavior? You've provided some information about how it is not working, but how it should work?
Hi, I think the desired behavior should be when we set autoFocus=false, it shouldn't focus automatically even the focus is outside the lock. To implement this behavior, maybe there could be a 'disabled' props for AutoFocusInside to disable the initial auto focus?
No, this is not how Lock works:
- if focus is outside - it will be moved inside
- unless the focus is on body, which is "no focus"
- the only way to disable this behavior is to
enabled={false}
and deactivate lock at all.- you can listen to
Focus
events inside the Lock and activate it once focus is inside and should be managed.
- you can listen to
autofocus
controls only what will be focused. Without it enabled you are expected to do something onActivation
, and FocusLock will not interfere.
This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.