Add `autofocus` directive for input elements
This commit is contained in:
parent
224db2f890
commit
6f1985833e
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* Input/Textarea Autofocus Directive for Vue
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* Set focus when element is rendered, but
|
||||||
|
* is not visible, using IntersectionObserver
|
||||||
|
*
|
||||||
|
* @param {Element} el Target element
|
||||||
|
*/
|
||||||
|
inserted(el) {
|
||||||
|
if ('IntersectionObserver' in window) {
|
||||||
|
// Element visibility is dynamic, so we attach observer
|
||||||
|
el.visibilityObserver = new IntersectionObserver(entries => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
// Combining `intersectionRatio > 0` and
|
||||||
|
// element's `offsetParent` presence will
|
||||||
|
// deteremine if element is truely visible
|
||||||
|
if (entry.intersectionRatio > 0 && entry.target.offsetParent) {
|
||||||
|
entry.target.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bind the observer.
|
||||||
|
el.visibilityObserver.observe(el, { root: document.documentElement });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Detach observer on unbind hook.
|
||||||
|
*
|
||||||
|
* @param {Element} el Target element
|
||||||
|
*/
|
||||||
|
unbind(el) {
|
||||||
|
if (el.visibilityObserver) {
|
||||||
|
el.visibilityObserver.disconnect();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
|
@ -0,0 +1,38 @@
|
||||||
|
import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We're testing this directive's hooks as pure functions
|
||||||
|
* since behaviour of this directive is highly-dependent
|
||||||
|
* on underlying DOM methods.
|
||||||
|
*/
|
||||||
|
describe('AutofocusOnShow directive', () => {
|
||||||
|
describe('with input invisible on component render', () => {
|
||||||
|
let el;
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>');
|
||||||
|
el = document.querySelector('#inputel');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should bind IntersectionObserver on input element', () => {
|
||||||
|
spyOn(el, 'focus');
|
||||||
|
|
||||||
|
autofocusonshow.inserted(el);
|
||||||
|
|
||||||
|
expect(el.visibilityObserver).toBeDefined();
|
||||||
|
expect(el.focus).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should stop IntersectionObserver on input element on unbind hook', () => {
|
||||||
|
el.visibilityObserver = {
|
||||||
|
disconnect: () => {},
|
||||||
|
};
|
||||||
|
spyOn(el.visibilityObserver, 'disconnect');
|
||||||
|
|
||||||
|
autofocusonshow.unbind(el);
|
||||||
|
|
||||||
|
expect(el.visibilityObserver).toBeDefined();
|
||||||
|
expect(el.visibilityObserver.disconnect).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue