primevue 3.12.4 → 3.13.0

package/dock/dock.js

@@ -74,34 +74,37 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default['default'],
-            'tooltip': Tooltip__default['default']
+            'ripple': Ripple__default["default"],
+            'tooltip': Tooltip__default["default"]
         }
     };
 
     const _hoisted_1 = { class: "p-dock-list-container" };
+    const _hoisted_2 = ["onMouseenter"];
+    const _hoisted_3 = ["href", "target", "onClick"];
+    const _hoisted_4 = ["href", "target", "onClick", "tabindex"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
       const _directive_ripple = vue.resolveDirective("ripple");
       const _directive_tooltip = vue.resolveDirective("tooltip");
 
-      return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
-        vue.createVNode("ul", {
+      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("ul", {
           ref: "list",
           class: "p-dock-list",
           role: "menu",
-          onMouseleave: _cache[1] || (_cache[1] = (...args) => ($options.onListMouseLeave && $options.onListMouseLeave(...args)))
+          onMouseleave: _cache[0] || (_cache[0] = (...args) => ($options.onListMouseLeave && $options.onListMouseLeave(...args)))
         }, [
-          (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
-            return (vue.openBlock(), vue.createBlock("li", {
-              class: $options.itemClass(index),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
+            return (vue.openBlock(), vue.createElementBlock("li", {
+              class: vue.normalizeClass($options.itemClass(index)),
               key: index,
               role: "none",
               onMouseenter: $event => ($options.onItemMouseEnter(index))
             }, [
               (!$props.templates['item'])
-                ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
+                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     (item.to && !$options.disabled(item))
                       ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                           key: 0,
@@ -109,17 +112,17 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
                           custom: ""
                         }, {
                           default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
-                            vue.withDirectives(vue.createVNode("a", {
+                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                               href: href,
                               role: "menuitem",
-                              class: $options.linkClass(item, {isActive, isExactActive}),
+                              class: vue.normalizeClass($options.linkClass(item, {isActive, isExactActive})),
                               target: item.target,
                               onClick: $event => ($options.onItemClick($event, item, navigate))
                             }, [
                               (!$props.templates['icon'])
-                                ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
+                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                                     key: 0,
-                                    class: ['p-dock-action-icon', item.icon]
+                                    class: vue.normalizeClass(['p-dock-action-icon', item.icon])
                                   }, null, 2)), [
                                     [_directive_ripple]
                                   ])
@@ -127,25 +130,25 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
                                     key: 1,
                                     item: item
                                   }, null, 8, ["item"]))
-                            ], 10, ["href", "target", "onClick"]), [
+                            ], 10, _hoisted_3)), [
                               [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                             ])
                           ]),
                           _: 2
                         }, 1032, ["to"]))
-                      : vue.withDirectives((vue.openBlock(), vue.createBlock("a", {
+                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                           key: 1,
                           href: item.url,
                           role: "menuitem",
-                          class: $options.linkClass(item),
+                          class: vue.normalizeClass($options.linkClass(item)),
                           target: item.target,
                           onClick: $event => ($options.onItemClick($event, item)),
                           tabindex: $options.disabled(item) ? null : '0'
                         }, [
                           (!$props.templates['icon'])
-                            ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
+                            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                                 key: 0,
-                                class: ['p-dock-action-icon', item.icon]
+                                class: vue.normalizeClass(['p-dock-action-icon', item.icon])
                               }, null, 2)), [
                                 [_directive_ripple]
                               ])
@@ -153,7 +156,7 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
                                 key: 1,
                                 item: item
                               }, null, 8, ["item"]))
-                        ], 10, ["href", "target", "onClick", "tabindex"])), [
+                        ], 10, _hoisted_4)), [
                           [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                         ])
                   ], 64))
@@ -161,7 +164,7 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
                     key: 1,
                     item: item
                   }, null, 8, ["item"]))
-            ], 42, ["onMouseenter"]))
+            ], 42, _hoisted_2))
           }), 128))
         ], 544)
       ]))
@@ -198,9 +201,9 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DockSub = vue.resolveComponent("DockSub");
 
-      return (vue.openBlock(), vue.createBlock("div", {
-        class: $options.containerClass,
-        style: $props.style
+      return (vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass($options.containerClass),
+        style: vue.normalizeStyle($props.style)
       }, [
         vue.createVNode(_component_DockSub, {
           model: $props.model,
@@ -245,4 +248,4 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
 
     return script;
 
-}(primevue.ripple, primevue.tooltip, Vue));
+})(primevue.ripple, primevue.tooltip, Vue);

package/dock/dock.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dock=function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e),l=o(t),c={name:"DockSub",props:{model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,t){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},directives:{ripple:i.default,tooltip:l.default}};const r={class:"p-dock-list-container"};c.render=function(e,t,o,i,l,c){const s=n.resolveComponent("router-link"),a=n.resolveDirective("ripple"),p=n.resolveDirective("tooltip");return n.openBlock(),n.createBlock("div",r,[n.createVNode("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:t[1]||(t[1]=(...e)=>c.onListMouseLeave&&c.onListMouseLeave(...e))},[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(o.model,((e,t)=>(n.openBlock(),n.createBlock("li",{class:c.itemClass(t),key:t,role:"none",onMouseenter:e=>c.onItemMouseEnter(t)},[o.templates.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.item),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createBlock(n.Fragment,{key:0},[e.to&&!c.disabled(e)?(n.openBlock(),n.createBlock(s,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:l,isExactActive:r})=>[n.withDirectives(n.createVNode("a",{href:i,role:"menuitem",class:c.linkClass(e,{isActive:l,isExactActive:r}),target:e.target,onClick:n=>c.onItemClick(n,e,t)},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createBlock("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[a]])],10,["href","target","onClick"]),[[p,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createBlock("a",{key:1,href:e.url,role:"menuitem",class:c.linkClass(e),target:e.target,onClick:t=>c.onItemClick(t,e),tabindex:c.disabled(e)?null:"0"},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createBlock("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[a]])],10,["href","target","onClick","tabindex"])),[[p,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])],64))],42,["onMouseenter"])))),128))],544)])};var s={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:c}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),s.render=function(e,t,o,i,l,c){const r=n.resolveComponent("DockSub");return n.openBlock(),n.createBlock("div",{class:c.containerClass,style:o.style},[n.createVNode(r,{model:o.model,templates:e.$slots,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)},s}(primevue.ripple,primevue.tooltip,Vue);
+this.primevue=this.primevue||{},this.primevue.dock=function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e),l=o(t),c={name:"DockSub",props:{model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,t){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},directives:{ripple:i.default,tooltip:l.default}};const r={class:"p-dock-list-container"},s=["onMouseenter"],a=["href","target","onClick"],p=["href","target","onClick","tabindex"];c.render=function(e,t,o,i,l,c){const d=n.resolveComponent("router-link"),m=n.resolveDirective("ripple"),k=n.resolveDirective("tooltip");return n.openBlock(),n.createElementBlock("div",r,[n.createElementVNode("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:t[0]||(t[0]=(...e)=>c.onListMouseLeave&&c.onListMouseLeave(...e))},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(o.model,((e,t)=>(n.openBlock(),n.createElementBlock("li",{class:n.normalizeClass(c.itemClass(t)),key:t,role:"none",onMouseenter:e=>c.onItemMouseEnter(t)},[o.templates.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.item),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[e.to&&!c.disabled(e)?(n.openBlock(),n.createBlock(d,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:l,isExactActive:r})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:i,role:"menuitem",class:n.normalizeClass(c.linkClass(e,{isActive:l,isExactActive:r})),target:e.target,onClick:n=>c.onItemClick(n,e,t)},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-dock-action-icon",e.icon])},null,2)),[[m]])],10,a)),[[k,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:e.url,role:"menuitem",class:n.normalizeClass(c.linkClass(e)),target:e.target,onClick:t=>c.onItemClick(t,e),tabindex:c.disabled(e)?null:"0"},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-dock-action-icon",e.icon])},null,2)),[[m]])],10,p)),[[k,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])],64))],42,s)))),128))],544)])};var d={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:c}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),d.render=function(e,t,o,i,l,c){const r=n.resolveComponent("DockSub");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(c.containerClass),style:n.normalizeStyle(o.style)},[n.createVNode(r,{model:o.model,templates:e.$slots,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)},d}(primevue.ripple,primevue.tooltip,Vue);

package/dropdown/Dropdown.vue

@@ -15,7 +15,7 @@
                 <span :class="dropdownIconClass"></span>
             </slot>
         </div>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@@ -31,7 +31,7 @@
                                 <ul :ref="contentRef" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox">
                                     <template v-if="!optionGroupLabel">
                                         <li v-for="(option, i) of items" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
-                                            :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">
+                                            :key="getOptionRenderKey(option, i)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
                                         </li>
                                     </template>
@@ -41,7 +41,7 @@
                                                 <slot name="optiongroup" :option="optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(optionGroup)}}</slot>
                                             </li>
                                             <li v-for="(option, i) of getOptionGroupChildren(optionGroup)" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
-                                                :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">
+                                                :key="getOptionRenderKey(option, i)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">
                                                 <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
                                             </li>
                                         </template>
@@ -62,7 +62,7 @@
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -72,6 +72,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Dropdown',
@@ -189,8 +190,8 @@ export default {
         getOptionValue(option) {
             return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
         },
-        getOptionRenderKey(option) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
+        getOptionRenderKey(option, index) {
+            return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option) + '_' + index.toString();
         },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
@@ -237,9 +238,11 @@ export default {
         isSelected(option) {
             return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
-        show() {
+        show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
+
+            isFocus && this.$refs.focusInput.focus();
         },
         hide() {
             this.$emit('before-hide');
@@ -471,7 +474,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
             }
             else {
@@ -720,15 +723,9 @@ export default {
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
         },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         dropdownIconClass() {
             return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
@@ -737,7 +734,8 @@ export default {
         'ripple': Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller
+        'VirtualScroller': VirtualScroller,
+        'Portal': Portal
     }
 }
 </script>