disable tab navigation while loading is showing

[empresarrollo]

It would be great if you can capture the tab key so the user cannot go to some inputs or links with the tab key while the loading is enabled

[ankurk91]

I tried various solution but none of worked. I gone through packages like https://github.com/theKashey/vue-focus-lock but their solution is not clean and a bit hacky. I have also gone through bootstrap model component, because it is already doing the same. But could not figure out how they are doing.

[empresarrollo]

At least when the loader is fullscreen (I don't use it yet for a component), it should be possible by creating a method

onKeyDown(event) { 
   if (event.keyCode == 9) { 
      event.preventDefault() 
   }
}

and then on the created() method add something like document.addEventListener('keydown', this.onKeyDown)

I'll try this tomorrow, when I'm back to the project that is using this component.

[ankurk91]

I am constantly reading about this

https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/

Trying to find best and cheap way

[ankurk91]

@empresarrollo I have made this feature, i haven't released it, need more testing. See the commit https://github.com/ankurk91/vue-loading-overlay/commit/063cceee1d4800ea986b2e845fdb85263cff2d29

Will invest more time this weekend.

[ankurk91]

Released v2.2.0