From f685c1f9cf999e6fcb52b45a6c7bccfd383ff887 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 24 Jan 2020 11:33:12 -0400 Subject: [PATCH 1/3] fix(v-b-modal): only unbind/rebind if trigger element or modal ID changes (closes #4669) --- src/directives/modal/modal.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js index 0f92ea31b8a..61578dc5a82 100644 --- a/src/directives/modal/modal.js +++ b/src/directives/modal/modal.js @@ -16,7 +16,7 @@ import { keys } from '../../utils/object' const EVENT_SHOW = 'bv::show::modal' // Prop name we use to store info on root element -const HANDLER = '__bv_modal_directive__' +const PROPERTY = '__bv_modal_directive__' const EVENT_OPTS = { passive: true } @@ -64,7 +64,7 @@ const bind = (el, binding, vnode) => { } } } - el[HANDLER] = handler + el[PROPERTY] = { handler, target, trigger } // If element is not a button, we add `role="button"` for accessibility setRole(trigger) // Listen for click events @@ -79,18 +79,26 @@ const bind = (el, binding, vnode) => { const unbind = el => { const trigger = getTriggerElement(el) - const handler = el ? el[HANDLER] : null + const handler = el && el[PROPERTY] ? el[PROPERTY].handler : null if (trigger && handler) { eventOff(trigger, 'click', handler, EVENT_OPTS) eventOff(trigger, 'keydown', handler, EVENT_OPTS) } - delete el[HANDLER] + delete el[PROPERTY] } const componentUpdated = (el, binding, vnode) => { - // We bind and rebind just in case target changes - unbind(el, binding, vnode) - bind(el, binding, vnode) + const oldProp = el[PROPERTY] || {} + const target = getTarget(binding) + const trigger = getTriggerElement(el) + if (target !== oldProp.target || trigger !== oldProp.trigger) { + // We bind and rebind if the target or trigger changes + unbind(el, binding, vnode) + bind(el, binding, vnode) + } + // If trigger element is not a button, ensure `role="button"` + // is still set for accessibility + setRole(trigger) } const updated = () => {} From 926997ff45d759c0858d8697520fa407047985f3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 24 Jan 2020 12:31:36 -0400 Subject: [PATCH 2/3] Update modal.js --- src/directives/modal/modal.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js index 61578dc5a82..da23e266787 100644 --- a/src/directives/modal/modal.js +++ b/src/directives/modal/modal.js @@ -78,11 +78,14 @@ const bind = (el, binding, vnode) => { } const unbind = el => { - const trigger = getTriggerElement(el) - const handler = el && el[PROPERTY] ? el[PROPERTY].handler : null + const oldProp = el[PROPERTY] || {} + const trigger = oldProp[PROPERTY].trigger + const handler = oldProp[PROPERTY].handler if (trigger && handler) { eventOff(trigger, 'click', handler, EVENT_OPTS) eventOff(trigger, 'keydown', handler, EVENT_OPTS) + eventOff(el, 'click', handler, EVENT_OPTS) + eventOff(el, 'keydown', handler, EVENT_OPTS) } delete el[PROPERTY] } From 66aa7cd530580834f14f6cb9d766289f0ce75ea2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 24 Jan 2020 12:36:26 -0400 Subject: [PATCH 3/3] Update modal.js --- src/directives/modal/modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js index da23e266787..d112b8fd5c3 100644 --- a/src/directives/modal/modal.js +++ b/src/directives/modal/modal.js @@ -79,8 +79,8 @@ const bind = (el, binding, vnode) => { const unbind = el => { const oldProp = el[PROPERTY] || {} - const trigger = oldProp[PROPERTY].trigger - const handler = oldProp[PROPERTY].handler + const trigger = oldProp.trigger + const handler = oldProp.handler if (trigger && handler) { eventOff(trigger, 'click', handler, EVENT_OPTS) eventOff(trigger, 'keydown', handler, EVENT_OPTS)