-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v-click-outside stopped working after 1.9.0 #258
Comments
You need Vue 2.7.2 |
It is still happening though. I don't know if it can be reproduced in a codepen or similar. |
Here is without importing directive: /***/ "./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=template&id=2104b1ae&scoped=true&":
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=template&id=2104b1ae&scoped=true& ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "render": function() { return /* binding */ render; },
/* harmony export */ "staticRenderFns": function() { return /* binding */ staticRenderFns; }
/* harmony export */ });
/* harmony import */ var vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuetify/lib/components/VBtn */ "./node_modules/vuetify/lib/components/VBtn/VBtn.js");
/* harmony import */ var vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuetify/lib/components/VIcon */ "./node_modules/vuetify/lib/components/VIcon/VIcon.js");
/* harmony import */ var vuetify_lib_components_VTooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuetify/lib/components/VTooltip */ "./node_modules/vuetify/lib/components/VTooltip/VTooltip.js");
var render = function render() {
var _vm = this,
_c = _vm._self._c,
_setup = _vm._self._setupProxy;
return _c("span", {
staticClass: "wrapper"
}, [_c("span", {
class: ["d-flex align-center", _vm.abortOnRight ? "flex-row-reverse" : "justify-end", _vm.absolute ? "absolute" : undefined]
}, [_vm.confirmDeletion ? _c(vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__["default"], _vm._b({
attrs: {
icon: ""
},
on: {
click: function ($event) {
_vm.confirmDeletionSync = false;
}
}
}, "v-btn", _vm.buttonAttributes, false), [_c(vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__["default"], _vm._b({}, "v-icon", _vm.iconAttributes, false), [_vm._v(" " + _vm._s(_vm.icons.mdiClose) + " ")])], 1) : _vm._e(), _c(vuetify_lib_components_VTooltip__WEBPACK_IMPORTED_MODULE_2__["default"], {
attrs: {
top: "",
"open-delay": "400",
transition: "fade-transition",
disabled: _vm.tooltip === null
},
scopedSlots: _vm._u([{
key: "activator",
fn: function ({
on: tooltipOn,
attr: tooltipAttr
}) {
return [_c("span", _vm._g(_vm._b({}, "span", tooltipAttr, false), tooltipOn), [_vm.allowDeletion ? _c(vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__["default"], _vm._b({
directives: [{
name: "click-outside",
rawName: "v-click-outside",
value: _vm.cancelDeletion,
expression: "cancelDeletion"
}],
attrs: {
icon: !_vm.confirmDeletionSync,
color: _vm.confirmDeletionSync ? "error" : "",
loading: _vm.deleting
},
on: {
click: function ($event) {
return _vm.deleteItem();
}
}
}, "v-btn", _vm.buttonAttributes, false), [_c(vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__["default"], _vm._b({}, "v-icon", _vm.iconAttributes, false), [_vm._v(" " + _vm._s(_vm.icons.mdiDelete) + " ")]), _vm.confirmDeletionSync ? [_vm._v(" " + _vm._s(_vm.$t("actions.are-you-sure")) + " ")] : _vm._e()], 2) : _vm._e()], 1)];
}
}])
}, [_c("span", [_vm._v(_vm._s(_vm.tooltip))])])], 1)]);
};
var staticRenderFns = [];
render._withStripped = true;
/***/ }), And here is with directive import: /***/ "./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=template&id=2104b1ae&scoped=true&":
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=template&id=2104b1ae&scoped=true& ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "render": function() { return /* binding */ render; },
/* harmony export */ "staticRenderFns": function() { return /* binding */ staticRenderFns; }
/* harmony export */ });
/* harmony import */ var vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuetify/lib/components/VBtn */ "./node_modules/vuetify/lib/components/VBtn/VBtn.js");
/* harmony import */ var vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuetify/lib/components/VIcon */ "./node_modules/vuetify/lib/components/VIcon/VIcon.js");
/* harmony import */ var vuetify_lib_components_VTooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuetify/lib/components/VTooltip */ "./node_modules/vuetify/lib/components/VTooltip/VTooltip.js");
var render = function render() {
var _vm = this,
_c = _vm._self._c,
_setup = _vm._self._setupProxy;
return _c("span", {
staticClass: "wrapper"
}, [_c("span", {
class: ["d-flex align-center", _vm.abortOnRight ? "flex-row-reverse" : "justify-end", _vm.absolute ? "absolute" : undefined]
}, [_vm.confirmDeletion ? _c(vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__["default"], _vm._b({
attrs: {
icon: ""
},
on: {
click: function ($event) {
_vm.confirmDeletionSync = false;
}
}
}, "v-btn", _vm.buttonAttributes, false), [_c(vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__["default"], _vm._b({}, "v-icon", _vm.iconAttributes, false), [_vm._v(" " + _vm._s(_vm.icons.mdiClose) + " ")])], 1) : _vm._e(), _c(vuetify_lib_components_VTooltip__WEBPACK_IMPORTED_MODULE_2__["default"], {
attrs: {
top: "",
"open-delay": "400",
transition: "fade-transition",
disabled: _vm.tooltip === null
},
scopedSlots: _vm._u([{
key: "activator",
fn: function ({
on: tooltipOn,
attr: tooltipAttr
}) {
return [_c("span", _vm._g(_vm._b({}, "span", tooltipAttr, false), tooltipOn), [_vm.allowDeletion ? _c(vuetify_lib_components_VBtn__WEBPACK_IMPORTED_MODULE_0__["default"], _vm._b({
directives: [{
name: "click-outside",
rawName: "v-click-outside",
value: _vm.cancelDeletion,
expression: "cancelDeletion"
}],
attrs: {
icon: !_vm.confirmDeletionSync,
color: _vm.confirmDeletionSync ? "error" : "",
loading: _vm.deleting
},
on: {
click: function ($event) {
return _vm.deleteItem();
}
}
}, "v-btn", _vm.buttonAttributes, false), [_c(vuetify_lib_components_VIcon__WEBPACK_IMPORTED_MODULE_1__["default"], _vm._b({}, "v-icon", _vm.iconAttributes, false), [_vm._v(" " + _vm._s(_vm.icons.mdiDelete) + " ")]), _vm.confirmDeletionSync ? [_vm._v(" " + _vm._s(_vm.$t("actions.are-you-sure")) + " ")] : _vm._e()], 2) : _vm._e()], 1)];
}
}])
}, [_c("span", [_vm._v(_vm._s(_vm.tooltip))])])], 1)]);
};
var staticRenderFns = [];
render._withStripped = true;
/***/ }), So it's exactly the same, within the render function. However, the changing part happens at the Vue component:
/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=script&lang=ts&":
/*!*********************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=script&lang=ts& ***!
\*********************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-property-decorator */ "./node_modules/vue-property-decorator/lib/index.js");
/* harmony import */ var _mdi_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mdi/js */ "./node_modules/@mdi/js/mdi.js");
// import { ClickOutside } from 'vuetify/lib/directives'
let ConfirmDeletion = class ConfirmDeletion extends vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Vue {
constructor() {
super(...arguments);
this.deleting = false;
this.icons = {
mdiArrowRight: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiArrowRight,
mdiClose: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiClose,
mdiDelete: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiDelete
};
}
get abortOnRight() {
return this.abortOnLeft !== undefined ? !this.abortOnLeft : this.right;
}
cancelDeletion() {
if (this.confirmDeletion) {
this.confirmDeletionSync = false;
}
}
deleteItem() {
if (!this.confirmDeletionSync) {
this.confirmDeletionSync = true;
return;
}
this.deleting = true;
const promise = this.deleteCallback();
if (promise === undefined) {
this.deleting = false;
} else {
promise.finally(() => this.deleting = false);
}
}
};
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: true
})], ConfirmDeletion.prototype, "allowDeletion", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Function,
default: () => new Promise(resolve => resolve())
})], ConfirmDeletion.prototype, "deleteCallback", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: undefined,
validator: () => {
vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Vue.$log.warn('[ConfirmDeletion] abort-on-left prop is deprecated, use right');
return true;
}
})], ConfirmDeletion.prototype, "abortOnLeft", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "right", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.PropSync)('confirmDeletion', {
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "confirmDeletionSync", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Object,
default: () => ({})
})], ConfirmDeletion.prototype, "iconAttributes", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Object,
default: () => ({})
})], ConfirmDeletion.prototype, "buttonAttributes", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "absolute", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: String,
default: null
})], ConfirmDeletion.prototype, "tooltip", void 0);
ConfirmDeletion = (0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Component)({
name: 'ConfirmDeletion',
directives: {// ClickOutside
}
})], ConfirmDeletion);
/* harmony default export */ __webpack_exports__["default"] = (ConfirmDeletion);
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=script&lang=ts&":
/*!*********************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ConfirmDeletion.vue?vue&type=script&lang=ts& ***!
\*********************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-property-decorator */ "./node_modules/vue-property-decorator/lib/index.js");
/* harmony import */ var _mdi_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mdi/js */ "./node_modules/@mdi/js/mdi.js");
/* harmony import */ var vuetify_lib_directives__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vuetify/lib/directives */ "./node_modules/vuetify/lib/directives/click-outside/index.js");
let ConfirmDeletion = class ConfirmDeletion extends vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Vue {
constructor() {
super(...arguments);
this.deleting = false;
this.icons = {
mdiArrowRight: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiArrowRight,
mdiClose: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiClose,
mdiDelete: _mdi_js__WEBPACK_IMPORTED_MODULE_2__.mdiDelete
};
}
get abortOnRight() {
return this.abortOnLeft !== undefined ? !this.abortOnLeft : this.right;
}
cancelDeletion() {
if (this.confirmDeletion) {
this.confirmDeletionSync = false;
}
}
deleteItem() {
if (!this.confirmDeletionSync) {
this.confirmDeletionSync = true;
return;
}
this.deleting = true;
const promise = this.deleteCallback();
if (promise === undefined) {
this.deleting = false;
} else {
promise.finally(() => this.deleting = false);
}
}
};
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: true
})], ConfirmDeletion.prototype, "allowDeletion", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Function,
default: () => new Promise(resolve => resolve())
})], ConfirmDeletion.prototype, "deleteCallback", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: undefined,
validator: () => {
vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Vue.$log.warn('[ConfirmDeletion] abort-on-left prop is deprecated, use right');
return true;
}
})], ConfirmDeletion.prototype, "abortOnLeft", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "right", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.PropSync)('confirmDeletion', {
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "confirmDeletionSync", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Object,
default: () => ({})
})], ConfirmDeletion.prototype, "iconAttributes", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Object,
default: () => ({})
})], ConfirmDeletion.prototype, "buttonAttributes", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: Boolean,
default: false
})], ConfirmDeletion.prototype, "absolute", void 0);
(0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Prop)({
type: String,
default: null
})], ConfirmDeletion.prototype, "tooltip", void 0);
ConfirmDeletion = (0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Component)({
name: 'ConfirmDeletion',
directives: {
ClickOutside: vuetify_lib_directives__WEBPACK_IMPORTED_MODULE_4__.ClickOutside
}
})], ConfirmDeletion);
/* harmony default export */ __webpack_exports__["default"] = (ConfirmDeletion);
/***/ }), |
I'm mostly interested in the render function section. I can see you have |
I (unsurprisingly) confirm that the fix and the release work. Thanks! |
In 1.7.3, my component used
v-click-outside
without global registration or local import.After 1.9.0 (and 1.9.1), I must import
ClickOutside
and declare the directive in my component. This is a valid workaround for me, as I only have one component that uses this directive, but the change is breaking nonetheless.The text was updated successfully, but these errors were encountered: