From 3c4204e73520e0f11c3102d0ee311592fbac402d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 15 Feb 2021 18:27:58 +0300
Subject: [PATCH] Keep item in view during keyboard nav

---
 src/components/dropdown/Dropdown.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 3f40c029e..8aa433391 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -22,7 +22,7 @@
                         <span class="p-dropdown-filter-icon pi pi-search"></span>
                     </div>
                 </div>
-                <div class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
+                <div :ref="itemsWrapperRef" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
                     <ul class="p-dropdown-items" role="listbox">
                         <template v-if="!optionGroupLabel">
                              <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
@@ -123,6 +123,7 @@ export default {
     previousSearchChar: null,
     searchValue: null,
     overlay: null,
+    itemsWrapper: null,
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
@@ -132,8 +133,12 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+        this.itemsWrapper = null;
         this.overlay = null;
     },
+    updated() {
+        this.scrollValueInView();
+    },
     methods: {
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
@@ -403,6 +408,7 @@ export default {
             this.unbindScrollListener();
             this.unbindResizeListener();
             this.$emit('hide');
+            this.itemsWrapper = null;
             this.overlay = null;
         },
         alignOverlay() {
@@ -569,6 +575,17 @@ export default {
         },
         overlayRef(el) {
             this.overlay = el;
+        },
+        itemsWrapperRef(el) {
+            this.itemsWrapper = el;
+        },
+        scrollValueInView() {
+            if (this.overlay) {
+                let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
+                if (selectedItem) {
+                    DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.p-highlight'));
+                }
+            }
         }
     },
     computed: {