2022-10-04 10:48:23 +00:00
|
|
|
import type {Directive} from 'vue'
|
|
|
|
|
|
|
|
const focus = <Directive<HTMLElement,string>>{
|
2020-11-02 20:52:07 +00:00
|
|
|
// When the bound element is inserted into the DOM...
|
2022-10-04 10:48:23 +00:00
|
|
|
mounted(el, {modifiers}) {
|
2020-11-02 20:52:07 +00:00
|
|
|
// Focus the element only if the viewport is big enough
|
|
|
|
// auto focusing elements on mobile can be annoying since in these cases the
|
|
|
|
// keyboard always pops up and takes half of the available space on the screen.
|
|
|
|
// The threshhold is the same as the breakpoints in css.
|
2021-12-10 12:21:25 +00:00
|
|
|
if (window.innerWidth > 769 || modifiers?.always) {
|
2020-11-02 20:52:07 +00:00
|
|
|
el.focus()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
2022-10-04 10:48:23 +00:00
|
|
|
|
|
|
|
export default focus
|