Permalink
Browse files

fix(dropdowns): Allow gracefull fallback if Popper.js not defined (#920)

* fix(dropdowns): Allow gracefull fallback if Popper not defined

* Warn on mount that Popper.js not available

* ESLint

* fix typos
  • Loading branch information...
tmorehouse committed Aug 24, 2017
1 parent aeb11be commit 41b59478b06ac2e88ef5e6da9b6634e945329f02
Showing with 23 additions and 13 deletions.
  1. +23 −13 lib/mixins/dropdown.js
@@ -4,6 +4,7 @@ import clickoutMixin from './clickout';
import listenOnRootMixin from './listen-on-root';
import { from as arrayFrom } from '../utils/array';
import { assign } from '../utils/object';
import warn from '../utils/warn';

// Determine if an HTML element is visible - Faster than CSS check
const isVisible = el => el && (el.offsetWidth > 0 || el.offsetHeight > 0);
@@ -77,7 +78,7 @@ export default {
type: Boolean,
default: false
},
popperOps: {
popperOpts: {
type: Object,
default: () => {}
}
@@ -118,6 +119,11 @@ export default {
computed: {
toggler: () => this.$refs.toggle.$el || this.$refs.toggle
},
mounted() {
if (typeof Popper === 'undefined') {
warn(`<${this.$options._componentTag}>: Popper.js not found! Propper positioning requires Popper.js`);
}
},
destroyed() {
if (this._popper) {
// Ensure popper event listeners are removed cleanly
@@ -136,19 +142,22 @@ export default {
// Ensure other menus are closed
this.emitOnRoot('shown::dropdown', this);

// Are we in a navbar ?
if (this.inNavbar === null && this.isNav) {
this.inNavbar = Boolean(this.$el.closest('.navbar'));
}
// for dropup with alignment we use the parent element as popper container
let element = ((this.dropup && this.right) || this.split || this.inNavbar) ?
this.$el :
this.$refs.toggle;
// Make sure we have a reference to an element, not component.
element = element.$el || element;
// If popper not installed, then fallback gracefully to dropdown only with left alignment
if (typeof Popper === 'function') {
// Are we in a navbar ?
if (this.inNavbar === null && this.isNav) {
this.inNavbar = Boolean(this.$el.closest('.navbar'));
}
// for dropup with alignment we use the parent element as popper container
let element = ((this.dropup && this.right) || this.split || this.inNavbar) ?
this.$el :
this.$refs.toggle;
// Make sure we have a reference to an element, not a component!
element = element.$el || element;

// Instantiate popper.js
this._popper = new Popper(element, this.$refs.menu, this.getPopperConfig());
// Instantiate popper.js
this._popper = new Popper(element, this.$refs.menu, this.getPopperConfig());
}

this.setTouchStart(true);
this.$emit('shown');
@@ -198,6 +207,7 @@ export default {
return assign(popperConfig, this.popperOpts || {});
},
setTouchStart(on) {

/*
If this is a touch-enabled device we add extra
empty mouseover listeners to the body's immediate children;

0 comments on commit 41b5947

Please sign in to comment.