diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue index f77f96be..7548787a 100644 --- a/src/components/vue-draggable-resizable.vue +++ b/src/components/vue-draggable-resizable.vue @@ -102,6 +102,10 @@ export default { type: Boolean, default: false }, + deactivationSelector: { + type: String, + default: null + }, active: { type: Boolean, default: false @@ -423,6 +427,11 @@ export default { const target = e.target || e.srcElement const regex = new RegExp(this.className + '-([trmbl]{2})', '') + if (this.deactivationSelector && document.querySelector(this.deactivationSelector) && !document.querySelector(this.deactivationSelector).contains(target)) { + this.resetBoundsAndMouseState() + return + } + if (!this.$el.contains(target) && !regex.test(target.className)) { if (this.enabled && !this.preventDeactivation) { this.enabled = false diff --git a/tests/feature/specs/props/active.spec.js b/tests/feature/specs/props/active.spec.js index 9d9ec06b..55954285 100644 --- a/tests/feature/specs/props/active.spec.js +++ b/tests/feature/specs/props/active.spec.js @@ -187,3 +187,29 @@ describe('`prevent-deactivation` prop', function () { afterEach(() => wrapper.destroy()) }) + +describe('`deactivation-selector` prop', function () { + it('should not deactivate the component when clicking outside the deactivationSelector ', function (done) { + wrapper = mount(VueDraggableResizable, { + attachToDocument: true, + propsData: { + active: true, + preventDeactivation: false, + deactivationSelector: 'body' + } + }) + + expect(wrapper.props().active).to.be.true + + syn.click(document.documentElement) + + wrapper.vm.$nextTick(() => { + expect(wrapper.props().active).to.be.true + expect(wrapper.emitted()).to.not.have.property('deactivated') + + done() + }) + }) + + afterEach(() => wrapper.destroy()) +})