@dialpad/dialtone-vue 2.77.0 → 2.77.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.77.1](https://github.com/dialpad/dialtone-vue/compare/v2.77.0...v2.77.1) (2023-04-06)
+
+
+### Bug Fixes
+
+* **Popover:** losing focus ([#896](https://github.com/dialpad/dialtone-vue/issues/896)) ([28f6ccd](https://github.com/dialpad/dialtone-vue/commit/28f6ccd82a6b4ed904227baceb395dbd115b4d36))
+
 # [2.77.0](https://github.com/dialpad/dialtone-vue/compare/v2.76.0...v2.77.0) (2023-04-06)
 
 

package/dist/dialtone-vue.common.js

@@ -8390,8 +8390,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_b22f331a_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=432e3a72&
-var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=6d22723e&
+var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8402,7 +8402,7 @@ var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_432e3a72_staticRenderFns = []
+var popovervue_type_template_id_6d22723e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13966,9 +13966,7 @@ var popover_header_footer_component = normalizeComponent(
     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    async preventScrolling() {
-      await this.$nextTick();
-
+    preventScrolling() {
       if (this.modal) {
         const element = this.anchorEl.closest('body, .tippy-box');
 
@@ -13986,23 +13984,19 @@ var popover_header_footer_component = normalizeComponent(
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
-    async enableScrolling() {
-      await this.$nextTick();
-
-      if (this.modal) {
-        var _element$tagName;
+    enableScrolling() {
+      var _element$tagName;
 
-        const element = this.anchorEl.closest('body, .tippy-box');
-        if (!element) return;
+      const element = this.anchorEl.closest('body, .tippy-box');
+      if (!element) return;
 
-        if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
-          element.classList.remove('d-of-hidden');
-          this.tip.setProps({
-            offset: this.offset
-          });
-        } else {
-          element.classList.remove('d-zi-popover');
-        }
+      if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
+        element.classList.remove('d-of-hidden');
+        this.tip.setProps({
+          offset: this.offset
+        });
+      } else {
+        element.classList.remove('d-zi-popover');
       }
     },
 
@@ -14031,10 +14025,10 @@ var popover_header_footer_component = normalizeComponent(
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
 
         await this.$nextTick();
+        this.enableScrolling();
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -14043,10 +14037,10 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement();
-      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
+      this.preventScrolling();
       this.$emit('opened', true, this.$refs.popover__content);
 
       if (this.open !== null) {
@@ -14173,8 +14167,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(4230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_432e3a72_render,
-  popovervue_type_template_id_432e3a72_staticRenderFns,
+  popovervue_type_template_id_6d22723e_render,
+  popovervue_type_template_id_6d22723e_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -8400,8 +8400,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_b22f331a_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=432e3a72&
-var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=6d22723e&
+var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8412,7 +8412,7 @@ var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_432e3a72_staticRenderFns = []
+var popovervue_type_template_id_6d22723e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13976,9 +13976,7 @@ var popover_header_footer_component = normalizeComponent(
     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    async preventScrolling() {
-      await this.$nextTick();
-
+    preventScrolling() {
       if (this.modal) {
         const element = this.anchorEl.closest('body, .tippy-box');
 
@@ -13996,23 +13994,19 @@ var popover_header_footer_component = normalizeComponent(
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
-    async enableScrolling() {
-      await this.$nextTick();
-
-      if (this.modal) {
-        var _element$tagName;
+    enableScrolling() {
+      var _element$tagName;
 
-        const element = this.anchorEl.closest('body, .tippy-box');
-        if (!element) return;
+      const element = this.anchorEl.closest('body, .tippy-box');
+      if (!element) return;
 
-        if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
-          element.classList.remove('d-of-hidden');
-          this.tip.setProps({
-            offset: this.offset
-          });
-        } else {
-          element.classList.remove('d-zi-popover');
-        }
+      if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
+        element.classList.remove('d-of-hidden');
+        this.tip.setProps({
+          offset: this.offset
+        });
+      } else {
+        element.classList.remove('d-zi-popover');
       }
     },
 
@@ -14041,10 +14035,10 @@ var popover_header_footer_component = normalizeComponent(
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
 
         await this.$nextTick();
+        this.enableScrolling();
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -14053,10 +14047,10 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement();
-      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
+      this.preventScrolling();
       this.$emit('opened', true, this.$refs.popover__content);
 
       if (this.open !== null) {
@@ -14183,8 +14177,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(2532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_432e3a72_render,
-  popovervue_type_template_id_432e3a72_staticRenderFns,
+  popovervue_type_template_id_6d22723e_render,
+  popovervue_type_template_id_6d22723e_staticRenderFns,
   false,
   null,
   null,