Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus url bar #13

Open
Fusseldieb opened this issue May 31, 2019 · 1 comment
Open

Focus url bar #13

Fusseldieb opened this issue May 31, 2019 · 1 comment

Comments

@Fusseldieb
Copy link

Fusseldieb commented May 31, 2019

Hi,
firstly, thanks for this nice package, it works great.

But now to my question:
Is there any option to make the focus-lock leave the DOM and jump to the URL bar and then back, like the default browser behaviour?

I was thinking something like:
<FocusLock :allowEscapeToURLBar="true">

Currently it does:

  • First DOM element > ... > Last DOM element > First DOM element > ...

But the default browser (Chrome) behaviour is:

  • Upper left site certificate > URL bar > First DOM element > ...

It would be nice to have something like this to set.

@theKashey
Copy link
Owner

It's a long story, and some people thinks this behaviour is right(you, bootstap), while some are not(modal specs).
The big brother - react-focus-lock, has this feature, and it's easy to implement the same behaviour here - additional value for noFocusGuard - true, false, tail.
As far as I can see - right now guardsEnabled is not used anywhere, so this option just don't work.

<div>
        <div :tabIndex="disabled ? -1 : 0" :style="hidden"></div>
        <div :tabIndex="disabled ? -1 : 1" :style="hidden"></div>

        <div @focusout="onBlur" data-lock>
            <slot></slot>
        </div>

        <div :tabIndex="disabled ? -1 : 0" :style="hidden"></div> 
        //  ^^^ conditionally remove the last guard.
    </div>

That would allow moving focus to the browser navigation if your modal is the last element on the page. That's the requirement, or it would move to the next focusable element.

Plus add one more condition to activateTrap - focusWasOutsideWindow (as seen here). Without it after tabbing back to window you will focus body, and would have to tab again to focus the Lock.

I am not quite sure I would be apply to create a PR soon, and would be very thankful you will try to implement these two changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants