primevue 2.5.0 → 2.8.0

package/dropdown/Dropdown.vue

@@ -13,12 +13,14 @@
         </span>
         <i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
+            <slot name="indicator">
+                <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
+            </slot>
         </div>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
                 <div class="p-dropdown-header" v-if="filter">
-                     <div  class="p-dropdown-filter-container">
+                     <div class="p-dropdown-filter-container">
                         <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown"  @input="onFilterChange"/>
                         <span class="p-dropdown-filter-icon pi pi-search"></span>
                     </div>
@@ -83,6 +85,11 @@ export default {
             overlayVisible: false
         };
     },
+    watch: {
+        value() {
+            this.isModelValueChanged = true;
+        }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -90,6 +97,15 @@ export default {
     currentSearchChar: null,
     previousSearchChar: null,
     searchValue: null,
+    isValueChanged: false,
+    updated() {
+        if (this.overlayVisible && this.isModelValueChanged) {
+            this.scrollValueInView();
+        }
+        this.isModelValueChanged = false;
+
+        this.onFilterUpdated();
+    },
     beforeDestroy() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
@@ -371,7 +387,7 @@ export default {
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
-                    if (this.overlayVisible && !DomHandler.isAndroid()) {
+                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
                         this.hide();
                     }
                 };
@@ -393,7 +409,7 @@ export default {
                 clearTimeout(this.searchTimeout);
             }
 
-            const char = String.fromCharCode(event.keyCode);
+            const char = event.key;
             this.previousSearchChar = this.currentSearchChar;
             this.currentSearchChar = char;
 
@@ -455,10 +471,20 @@ export default {
         },
         onFilterChange(event) {
             this.$emit('filter', {originalEvent: event, value: event.target.value});
+        },
+        onFilterUpdated() {
             if (this.overlayVisible) {
                 this.alignOverlay();
             }
-        }
+        },
+        scrollValueInView() {
+            if (this.$refs.overlay) {
+                let selectedItem = DomHandler.findSingle(this.$refs.overlay, 'li.p-highlight');
+                if (selectedItem) {
+                    selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            }
+        },
     },
     computed: {
         visibleOptions() {
@@ -558,6 +584,8 @@ input.p-dropdown-label  {
 
 .p-dropdown-panel {
     position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .p-dropdown-items-wrapper {

package/dropdown/dropdown.common.js

@@ -4399,7 +4399,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-dropdown{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}", ""]);
+exports.push([module.i, ".p-dropdown{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}", ""]);
 
 // exports
 
@@ -4554,12 +4554,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dropdown/Dropdown.vue?vue&type=template&id=150df7f6&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",class:_vm.containerClass,on:{"click":function($event){return _vm.onClick($event)}}},[_c('div',{staticClass:"p-hidden-accessible"},[_c('input',{ref:"focusInput",attrs:{"type":"text","id":_vm.inputId,"readonly":"","disabled":_vm.disabled,"tabindex":_vm.tabindex,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible,"aria-labelledby":_vm.ariaLabelledBy},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"keydown":_vm.onKeyDown}})]),(_vm.editable)?_c('input',{staticClass:"p-dropdown-label p-inputtext",attrs:{"type":"text","disabled":_vm.disabled,"placeholder":_vm.placeholder,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible},domProps:{"value":_vm.editableInputValue},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"input":_vm.onEditableInput}}):_vm._e(),(!_vm.editable)?_c('span',{class:_vm.labelClass},[_vm._t("value",function(){return [_vm._v("\n            "+_vm._s(_vm.label)+"\n        ")]},{"value":_vm.value,"placeholder":_vm.placeholder})],2):_vm._e(),(_vm.showClear && _vm.value != null)?_c('i',{staticClass:"p-dropdown-clear-icon pi pi-times",on:{"click":function($event){return _vm.onClearClick($event)}}}):_vm._e(),_c('div',{staticClass:"p-dropdown-trigger",attrs:{"role":"button","aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible}},[_c('span',{staticClass:"p-dropdown-trigger-icon pi pi-chevron-down"})]),_c('transition',{attrs:{"name":"p-connected-overlay"},on:{"enter":_vm.onOverlayEnter,"leave":_vm.onOverlayLeave}},[(_vm.overlayVisible)?_c('div',{ref:"overlay",staticClass:"p-dropdown-panel p-component"},[(_vm.filter)?_c('div',{staticClass:"p-dropdown-header"},[_c('div',{staticClass:"p-dropdown-filter-container"},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.filterValue),expression:"filterValue"}],ref:"filterInput",staticClass:"p-dropdown-filter p-inputtext p-component",attrs:{"type":"text","autoComplete":"off","placeholder":_vm.filterPlaceholder},domProps:{"value":(_vm.filterValue)},on:{"keydown":_vm.onFilterKeyDown,"input":[function($event){if($event.target.composing){ return; }_vm.filterValue=$event.target.value},_vm.onFilterChange]}}),_c('span',{staticClass:"p-dropdown-filter-icon pi pi-search"})])]):_vm._e(),_c('div',{ref:"itemsWrapper",staticClass:"p-dropdown-items-wrapper",style:({'max-height': _vm.scrollHeight})},[_c('ul',{staticClass:"p-dropdown-items",attrs:{"role":"listbox"}},[_vm._l((_vm.visibleOptions),function(option,i){return _c('li',{directives:[{name:"ripple",rawName:"v-ripple"}],key:_vm.getOptionRenderKey(option),class:['p-dropdown-item', {'p-highlight': _vm.isSelected(option), 'p-disabled': _vm.isOptionDisabled(option)}],attrs:{"aria-label":_vm.getOptionLabel(option),"role":"option","aria-selected":_vm.isSelected(option)},on:{"click":function($event){return _vm.onOptionSelect($event, option)}}},[_vm._t("option",function(){return [_vm._v("\n                            "+_vm._s(_vm.getOptionLabel(option))+"\n                        ")]},{"option":option,"index":i})],2)}),(_vm.filterValue && (!_vm.visibleOptions || (_vm.visibleOptions && _vm.visibleOptions.length === 0)))?_c('li',{staticClass:"p-dropdown-empty-message"},[_vm._v(_vm._s(_vm.emptyFilterMessage))]):_vm._e()],2)])]):_vm._e()])],1)}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dropdown/Dropdown.vue?vue&type=template&id=5c815322&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",class:_vm.containerClass,on:{"click":function($event){return _vm.onClick($event)}}},[_c('div',{staticClass:"p-hidden-accessible"},[_c('input',{ref:"focusInput",attrs:{"type":"text","id":_vm.inputId,"readonly":"","disabled":_vm.disabled,"tabindex":_vm.tabindex,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible,"aria-labelledby":_vm.ariaLabelledBy},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"keydown":_vm.onKeyDown}})]),(_vm.editable)?_c('input',{staticClass:"p-dropdown-label p-inputtext",attrs:{"type":"text","disabled":_vm.disabled,"placeholder":_vm.placeholder,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible},domProps:{"value":_vm.editableInputValue},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"input":_vm.onEditableInput}}):_vm._e(),(!_vm.editable)?_c('span',{class:_vm.labelClass},[_vm._t("value",function(){return [_vm._v("\n            "+_vm._s(_vm.label)+"\n        ")]},{"value":_vm.value,"placeholder":_vm.placeholder})],2):_vm._e(),(_vm.showClear && _vm.value != null)?_c('i',{staticClass:"p-dropdown-clear-icon pi pi-times",on:{"click":function($event){return _vm.onClearClick($event)}}}):_vm._e(),_c('div',{staticClass:"p-dropdown-trigger",attrs:{"role":"button","aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible}},[_vm._t("indicator",function(){return [_c('span',{staticClass:"p-dropdown-trigger-icon pi pi-chevron-down"})]})],2),_c('transition',{attrs:{"name":"p-connected-overlay"},on:{"enter":_vm.onOverlayEnter,"leave":_vm.onOverlayLeave}},[(_vm.overlayVisible)?_c('div',{ref:"overlay",staticClass:"p-dropdown-panel p-component"},[(_vm.filter)?_c('div',{staticClass:"p-dropdown-header"},[_c('div',{staticClass:"p-dropdown-filter-container"},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.filterValue),expression:"filterValue"}],ref:"filterInput",staticClass:"p-dropdown-filter p-inputtext p-component",attrs:{"type":"text","autoComplete":"off","placeholder":_vm.filterPlaceholder},domProps:{"value":(_vm.filterValue)},on:{"keydown":_vm.onFilterKeyDown,"input":[function($event){if($event.target.composing){ return; }_vm.filterValue=$event.target.value},_vm.onFilterChange]}}),_c('span',{staticClass:"p-dropdown-filter-icon pi pi-search"})])]):_vm._e(),_c('div',{ref:"itemsWrapper",staticClass:"p-dropdown-items-wrapper",style:({'max-height': _vm.scrollHeight})},[_c('ul',{staticClass:"p-dropdown-items",attrs:{"role":"listbox"}},[_vm._l((_vm.visibleOptions),function(option,i){return _c('li',{directives:[{name:"ripple",rawName:"v-ripple"}],key:_vm.getOptionRenderKey(option),class:['p-dropdown-item', {'p-highlight': _vm.isSelected(option), 'p-disabled': _vm.isOptionDisabled(option)}],attrs:{"aria-label":_vm.getOptionLabel(option),"role":"option","aria-selected":_vm.isSelected(option)},on:{"click":function($event){return _vm.onOptionSelect($event, option)}}},[_vm._t("option",function(){return [_vm._v("\n                            "+_vm._s(_vm.getOptionLabel(option))+"\n                        ")]},{"option":option,"index":i})],2)}),(_vm.filterValue && (!_vm.visibleOptions || (_vm.visibleOptions && _vm.visibleOptions.length === 0)))?_c('li',{staticClass:"p-dropdown-empty-message"},[_vm._v(_vm._s(_vm.emptyFilterMessage))]):_vm._e()],2)])]):_vm._e()])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/dropdown/Dropdown.vue?vue&type=template&id=150df7f6&
+// CONCATENATED MODULE: ./src/components/dropdown/Dropdown.vue?vue&type=template&id=5c815322&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.symbol.async-iterator.js
 var es7_symbol_async_iterator = __webpack_require__("ac4d");
@@ -4612,6 +4612,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.find.js
@@ -5156,6 +5161,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -5163,6 +5174,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = this.style;
+      } else {
+        for (var prop in this.style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -5173,6 +5195,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -5229,9 +5256,6 @@ var ConnectedOverlayScrollHandler_ConnectedOverlayScrollHandler = /*#__PURE__*/f
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js
 var web_dom_iterable = __webpack_require__("ac6a");
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
-var es6_array_iterator = __webpack_require__("cadf");
-
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -5246,20 +5270,14 @@ var iterator_default = /*#__PURE__*/__webpack_require__.n(iterator);
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js
 
 
-function typeof_typeof(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof symbol_default.a === "function" && typeof iterator_default.a === "symbol") {
-    typeof_typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    typeof_typeof = function _typeof(obj) {
-      return obj && typeof symbol_default.a === "function" && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return typeof_typeof(obj);
+  return _typeof = "function" == typeof symbol_default.a && "symbol" == typeof iterator_default.a ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof symbol_default.a && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 // CONCATENATED MODULE: ./src/components/utils/ObjectUtils.js
 
@@ -5278,7 +5296,6 @@ function typeof_typeof(obj) {
 
 
 
-
 function ObjectUtils_createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = ObjectUtils_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function ObjectUtils_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ObjectUtils_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ObjectUtils_arrayLikeToArray(o, minLen); }
@@ -5300,7 +5317,7 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
     value: function deepEquals(a, b) {
       if (a === b) return true;
 
-      if (a && b && typeof_typeof(a) == 'object' && typeof_typeof(b) == 'object') {
+      if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
         var arrA = Array.isArray(a),
             arrB = Array.isArray(b),
             i,
@@ -5502,6 +5519,19 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
 
       return str;
     }
+  }, {
+    key: "getVNodeProp",
+    value: function getVNodeProp(vnode, prop) {
+      var props = vnode._props;
+
+      if (props) {
+        var kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        var propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
+        return props[propName];
+      }
+
+      return null;
+    }
   }]);
 
   return ObjectUtils;
@@ -5643,6 +5673,8 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
 //
 //
 //
+//
+//
 
 
 
@@ -5685,6 +5717,11 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
       overlayVisible: false
     };
   },
+  watch: {
+    value: function value() {
+      this.isModelValueChanged = true;
+    }
+  },
   outsideClickListener: null,
   scrollHandler: null,
   resizeListener: null,
@@ -5692,6 +5729,15 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
   currentSearchChar: null,
   previousSearchChar: null,
   searchValue: null,
+  isValueChanged: false,
+  updated: function updated() {
+    if (this.overlayVisible && this.isModelValueChanged) {
+      this.scrollValueInView();
+    }
+
+    this.isModelValueChanged = false;
+    this.onFilterUpdated();
+  },
   beforeDestroy: function beforeDestroy() {
     this.restoreAppend();
     this.unbindOutsideClickListener();
@@ -5986,7 +6032,7 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this4.overlayVisible && !DomHandler_DomHandler.isAndroid()) {
+          if (_this4.overlayVisible && !DomHandler_DomHandler.isTouchDevice()) {
             _this4.hide();
           }
         };
@@ -6011,7 +6057,7 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
         clearTimeout(this.searchTimeout);
       }
 
-      var char = String.fromCharCode(event.keyCode);
+      var char = event.key;
       this.previousSearchChar = this.currentSearchChar;
       this.currentSearchChar = char;
       if (this.previousSearchChar === this.currentSearchChar) this.searchValue = this.currentSearchChar;else this.searchValue = this.searchValue ? this.searchValue + char : char;
@@ -6066,10 +6112,23 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
         originalEvent: event,
         value: event.target.value
       });
-
+    },
+    onFilterUpdated: function onFilterUpdated() {
       if (this.overlayVisible) {
         this.alignOverlay();
       }
+    },
+    scrollValueInView: function scrollValueInView() {
+      if (this.$refs.overlay) {
+        var selectedItem = DomHandler_DomHandler.findSingle(this.$refs.overlay, 'li.p-highlight');
+
+        if (selectedItem) {
+          selectedItem.scrollIntoView({
+            block: 'nearest',
+            inline: 'start'
+          });
+        }
+      }
     }
   },
   computed: {

package/dropdown/dropdown.umd.js

@@ -4408,7 +4408,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-dropdown{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}", ""]);
+exports.push([module.i, ".p-dropdown{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}", ""]);
 
 // exports
 
@@ -4563,12 +4563,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dropdown/Dropdown.vue?vue&type=template&id=150df7f6&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",class:_vm.containerClass,on:{"click":function($event){return _vm.onClick($event)}}},[_c('div',{staticClass:"p-hidden-accessible"},[_c('input',{ref:"focusInput",attrs:{"type":"text","id":_vm.inputId,"readonly":"","disabled":_vm.disabled,"tabindex":_vm.tabindex,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible,"aria-labelledby":_vm.ariaLabelledBy},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"keydown":_vm.onKeyDown}})]),(_vm.editable)?_c('input',{staticClass:"p-dropdown-label p-inputtext",attrs:{"type":"text","disabled":_vm.disabled,"placeholder":_vm.placeholder,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible},domProps:{"value":_vm.editableInputValue},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"input":_vm.onEditableInput}}):_vm._e(),(!_vm.editable)?_c('span',{class:_vm.labelClass},[_vm._t("value",function(){return [_vm._v("\n            "+_vm._s(_vm.label)+"\n        ")]},{"value":_vm.value,"placeholder":_vm.placeholder})],2):_vm._e(),(_vm.showClear && _vm.value != null)?_c('i',{staticClass:"p-dropdown-clear-icon pi pi-times",on:{"click":function($event){return _vm.onClearClick($event)}}}):_vm._e(),_c('div',{staticClass:"p-dropdown-trigger",attrs:{"role":"button","aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible}},[_c('span',{staticClass:"p-dropdown-trigger-icon pi pi-chevron-down"})]),_c('transition',{attrs:{"name":"p-connected-overlay"},on:{"enter":_vm.onOverlayEnter,"leave":_vm.onOverlayLeave}},[(_vm.overlayVisible)?_c('div',{ref:"overlay",staticClass:"p-dropdown-panel p-component"},[(_vm.filter)?_c('div',{staticClass:"p-dropdown-header"},[_c('div',{staticClass:"p-dropdown-filter-container"},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.filterValue),expression:"filterValue"}],ref:"filterInput",staticClass:"p-dropdown-filter p-inputtext p-component",attrs:{"type":"text","autoComplete":"off","placeholder":_vm.filterPlaceholder},domProps:{"value":(_vm.filterValue)},on:{"keydown":_vm.onFilterKeyDown,"input":[function($event){if($event.target.composing){ return; }_vm.filterValue=$event.target.value},_vm.onFilterChange]}}),_c('span',{staticClass:"p-dropdown-filter-icon pi pi-search"})])]):_vm._e(),_c('div',{ref:"itemsWrapper",staticClass:"p-dropdown-items-wrapper",style:({'max-height': _vm.scrollHeight})},[_c('ul',{staticClass:"p-dropdown-items",attrs:{"role":"listbox"}},[_vm._l((_vm.visibleOptions),function(option,i){return _c('li',{directives:[{name:"ripple",rawName:"v-ripple"}],key:_vm.getOptionRenderKey(option),class:['p-dropdown-item', {'p-highlight': _vm.isSelected(option), 'p-disabled': _vm.isOptionDisabled(option)}],attrs:{"aria-label":_vm.getOptionLabel(option),"role":"option","aria-selected":_vm.isSelected(option)},on:{"click":function($event){return _vm.onOptionSelect($event, option)}}},[_vm._t("option",function(){return [_vm._v("\n                            "+_vm._s(_vm.getOptionLabel(option))+"\n                        ")]},{"option":option,"index":i})],2)}),(_vm.filterValue && (!_vm.visibleOptions || (_vm.visibleOptions && _vm.visibleOptions.length === 0)))?_c('li',{staticClass:"p-dropdown-empty-message"},[_vm._v(_vm._s(_vm.emptyFilterMessage))]):_vm._e()],2)])]):_vm._e()])],1)}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dropdown/Dropdown.vue?vue&type=template&id=5c815322&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",class:_vm.containerClass,on:{"click":function($event){return _vm.onClick($event)}}},[_c('div',{staticClass:"p-hidden-accessible"},[_c('input',{ref:"focusInput",attrs:{"type":"text","id":_vm.inputId,"readonly":"","disabled":_vm.disabled,"tabindex":_vm.tabindex,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible,"aria-labelledby":_vm.ariaLabelledBy},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"keydown":_vm.onKeyDown}})]),(_vm.editable)?_c('input',{staticClass:"p-dropdown-label p-inputtext",attrs:{"type":"text","disabled":_vm.disabled,"placeholder":_vm.placeholder,"aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible},domProps:{"value":_vm.editableInputValue},on:{"focus":_vm.onFocus,"blur":_vm.onBlur,"input":_vm.onEditableInput}}):_vm._e(),(!_vm.editable)?_c('span',{class:_vm.labelClass},[_vm._t("value",function(){return [_vm._v("\n            "+_vm._s(_vm.label)+"\n        ")]},{"value":_vm.value,"placeholder":_vm.placeholder})],2):_vm._e(),(_vm.showClear && _vm.value != null)?_c('i',{staticClass:"p-dropdown-clear-icon pi pi-times",on:{"click":function($event){return _vm.onClearClick($event)}}}):_vm._e(),_c('div',{staticClass:"p-dropdown-trigger",attrs:{"role":"button","aria-haspopup":"listbox","aria-expanded":_vm.overlayVisible}},[_vm._t("indicator",function(){return [_c('span',{staticClass:"p-dropdown-trigger-icon pi pi-chevron-down"})]})],2),_c('transition',{attrs:{"name":"p-connected-overlay"},on:{"enter":_vm.onOverlayEnter,"leave":_vm.onOverlayLeave}},[(_vm.overlayVisible)?_c('div',{ref:"overlay",staticClass:"p-dropdown-panel p-component"},[(_vm.filter)?_c('div',{staticClass:"p-dropdown-header"},[_c('div',{staticClass:"p-dropdown-filter-container"},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.filterValue),expression:"filterValue"}],ref:"filterInput",staticClass:"p-dropdown-filter p-inputtext p-component",attrs:{"type":"text","autoComplete":"off","placeholder":_vm.filterPlaceholder},domProps:{"value":(_vm.filterValue)},on:{"keydown":_vm.onFilterKeyDown,"input":[function($event){if($event.target.composing){ return; }_vm.filterValue=$event.target.value},_vm.onFilterChange]}}),_c('span',{staticClass:"p-dropdown-filter-icon pi pi-search"})])]):_vm._e(),_c('div',{ref:"itemsWrapper",staticClass:"p-dropdown-items-wrapper",style:({'max-height': _vm.scrollHeight})},[_c('ul',{staticClass:"p-dropdown-items",attrs:{"role":"listbox"}},[_vm._l((_vm.visibleOptions),function(option,i){return _c('li',{directives:[{name:"ripple",rawName:"v-ripple"}],key:_vm.getOptionRenderKey(option),class:['p-dropdown-item', {'p-highlight': _vm.isSelected(option), 'p-disabled': _vm.isOptionDisabled(option)}],attrs:{"aria-label":_vm.getOptionLabel(option),"role":"option","aria-selected":_vm.isSelected(option)},on:{"click":function($event){return _vm.onOptionSelect($event, option)}}},[_vm._t("option",function(){return [_vm._v("\n                            "+_vm._s(_vm.getOptionLabel(option))+"\n                        ")]},{"option":option,"index":i})],2)}),(_vm.filterValue && (!_vm.visibleOptions || (_vm.visibleOptions && _vm.visibleOptions.length === 0)))?_c('li',{staticClass:"p-dropdown-empty-message"},[_vm._v(_vm._s(_vm.emptyFilterMessage))]):_vm._e()],2)])]):_vm._e()])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/dropdown/Dropdown.vue?vue&type=template&id=150df7f6&
+// CONCATENATED MODULE: ./src/components/dropdown/Dropdown.vue?vue&type=template&id=5c815322&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.symbol.async-iterator.js
 var es7_symbol_async_iterator = __webpack_require__("ac4d");
@@ -4621,6 +4621,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.find.js
@@ -5165,6 +5170,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -5172,6 +5183,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = this.style;
+      } else {
+        for (var prop in this.style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -5182,6 +5204,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -5238,9 +5265,6 @@ var ConnectedOverlayScrollHandler_ConnectedOverlayScrollHandler = /*#__PURE__*/f
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js
 var web_dom_iterable = __webpack_require__("ac6a");
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
-var es6_array_iterator = __webpack_require__("cadf");
-
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -5255,20 +5279,14 @@ var iterator_default = /*#__PURE__*/__webpack_require__.n(iterator);
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js
 
 
-function typeof_typeof(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof symbol_default.a === "function" && typeof iterator_default.a === "symbol") {
-    typeof_typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    typeof_typeof = function _typeof(obj) {
-      return obj && typeof symbol_default.a === "function" && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return typeof_typeof(obj);
+  return _typeof = "function" == typeof symbol_default.a && "symbol" == typeof iterator_default.a ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof symbol_default.a && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 // CONCATENATED MODULE: ./src/components/utils/ObjectUtils.js
 
@@ -5287,7 +5305,6 @@ function typeof_typeof(obj) {
 
 
 
-
 function ObjectUtils_createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = ObjectUtils_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function ObjectUtils_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ObjectUtils_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ObjectUtils_arrayLikeToArray(o, minLen); }
@@ -5309,7 +5326,7 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
     value: function deepEquals(a, b) {
       if (a === b) return true;
 
-      if (a && b && typeof_typeof(a) == 'object' && typeof_typeof(b) == 'object') {
+      if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
         var arrA = Array.isArray(a),
             arrB = Array.isArray(b),
             i,
@@ -5511,6 +5528,19 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
 
       return str;
     }
+  }, {
+    key: "getVNodeProp",
+    value: function getVNodeProp(vnode, prop) {
+      var props = vnode._props;
+
+      if (props) {
+        var kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        var propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
+        return props[propName];
+      }
+
+      return null;
+    }
   }]);
 
   return ObjectUtils;
@@ -5652,6 +5682,8 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
 //
 //
 //
+//
+//
 
 
 
@@ -5694,6 +5726,11 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
       overlayVisible: false
     };
   },
+  watch: {
+    value: function value() {
+      this.isModelValueChanged = true;
+    }
+  },
   outsideClickListener: null,
   scrollHandler: null,
   resizeListener: null,
@@ -5701,6 +5738,15 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
   currentSearchChar: null,
   previousSearchChar: null,
   searchValue: null,
+  isValueChanged: false,
+  updated: function updated() {
+    if (this.overlayVisible && this.isModelValueChanged) {
+      this.scrollValueInView();
+    }
+
+    this.isModelValueChanged = false;
+    this.onFilterUpdated();
+  },
   beforeDestroy: function beforeDestroy() {
     this.restoreAppend();
     this.unbindOutsideClickListener();
@@ -5995,7 +6041,7 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this4.overlayVisible && !DomHandler_DomHandler.isAndroid()) {
+          if (_this4.overlayVisible && !DomHandler_DomHandler.isTouchDevice()) {
             _this4.hide();
           }
         };
@@ -6020,7 +6066,7 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
         clearTimeout(this.searchTimeout);
       }
 
-      var char = String.fromCharCode(event.keyCode);
+      var char = event.key;
       this.previousSearchChar = this.currentSearchChar;
       this.currentSearchChar = char;
       if (this.previousSearchChar === this.currentSearchChar) this.searchValue = this.currentSearchChar;else this.searchValue = this.searchValue ? this.searchValue + char : char;
@@ -6075,10 +6121,23 @@ function Dropdownvue_type_script_lang_js_arrayLikeToArray(arr, len) { if (len ==
         originalEvent: event,
         value: event.target.value
       });
-
+    },
+    onFilterUpdated: function onFilterUpdated() {
       if (this.overlayVisible) {
         this.alignOverlay();
       }
+    },
+    scrollValueInView: function scrollValueInView() {
+      if (this.$refs.overlay) {
+        var selectedItem = DomHandler_DomHandler.findSingle(this.$refs.overlay, 'li.p-highlight');
+
+        if (selectedItem) {
+          selectedItem.scrollIntoView({
+            block: 'nearest',
+            inline: 'start'
+          });
+        }
+      }
     }
   },
   computed: {