Permalink
Browse files

feat(tooltip popover): Don't close if focus moves between trigger ele…

…ment and tip/popover (#1093)

* feat(tooltip popover): If focus moves betwen trigger element to tip/popover, don't close

Only applies when the trigger(s) are set to `focus` and/or `blur`

* Ensure tooltip/popover has a tabindex set
  • Loading branch information...
tmorehouse committed Sep 22, 2017
1 parent 87e5eb2 commit 87ffb4f3b4ff53290bfc4670e026e6c720ba2660
Showing with 27 additions and 1 deletion.
  1. +27 −1 lib/classes/tooltip.js
@@ -328,6 +328,12 @@ class ToolTip {
this.setRootListener(on);
// Ontouch start listeners
this.setOnTouchStartListener(on);
if (on && /(focus|blur)/.test(this.$config.trigger)) {
// If focus moves between trigger element and tip container, dont close
eventOn(this.$tip, 'focusout', this);
} else {
eventOff(this.$tip, 'focusout', this);
}
}
// force hide of tip (internal method)
@@ -515,6 +521,8 @@ class ToolTip {
// Try and compile user supplied template, or fallback to default template
this.$tip = this.compileTemplate(this.$config.template) || this.compileTemplate(this.constructor.Default.template);
}
// Add tab index so tip can be focused, and to allow it to be set as relatedTargt in focusin/out events
this.$tip.tabIndex = -1;
return this.$tip;
}
@@ -623,11 +631,29 @@ class ToolTip {
return;
}
const type = e.type;
const target = e.target;
const relatedTarget = e.relatedTarget;
const $element = this.$element;
const $tip = this.$tip;
if (type === 'click') {
this.toggle(e);
} else if (type === 'focusin' || type === 'mouseenter') {
this.enter(e);
} else if (type === 'focusout' || type === 'mouseleave') {
} else if (type === 'focusout') {
// target is the element which is loosing focus
// And relatdTarget is the element gaining focus
if (target === $element && $tip && $tip.contains(relatedTarget)) {
// If focus moves from $element to $tip, don't trigger a leave
return;
}
if ($tip && target === $tip && $element.contains(relatedTarget)) {
// If focus moves from $tip to $element, don't trigger a leave
// This will only happen during the whileOpen listeners
return;
}
// OPtherwise trigger a leave
this.leave(e);
} else if (type === 'mouseleave') {
this.leave(e);
}
}

0 comments on commit 87ffb4f

Please sign in to comment.