feat(items menu): added scrollToItemIfNeeded with true by default

to scroll to an item if it has moved beyond the scroll bar re #50
iliyaZelenko · Mar 8, 2019 · aec02ef · aec02ef
1 parent 1ce6509
commit aec02ef
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/src/component.vue b/src/component.vue
@@ -57,6 +57,7 @@
         <slot name="before-items-fixed" />
 
         <div
+          ref="IZ-select__menu-items"
           :style="{
             'max-height': menuItemsMaxHeight
           }"
@@ -67,8 +68,11 @@
             <div style="height: 8px;" />
           </slot>
 
+          <!--itemsComputedWithScrollLimit-->
           <div
-            v-for="(item, i) in itemsComputedWithScrollLimit"
+            v-for="(item, i) in itemsComputed"
+            v-show="i < scrollItemsLimitCurrent || (arrowsIndex && i <= arrowsIndex)"
+            ref="items"
             :key="'IZ-item-' + i"
             :class="{
               'IZ-select__item': true,

diff --git a/src/eventsListeners.js b/src/eventsListeners.js
@@ -1,5 +1,9 @@
+import { scrollIfNeeded } from '~/helpers'
+
 export default {
   onSelectByArrow (e) {
+    e.preventDefault()
+
     if (this.disabled || this.readonly) return
 
     this.showMenu()
@@ -15,6 +19,7 @@ export default {
       this.arrowsIndex--
     }
 
+    // Переход на противоположную сторону
     const end = this.itemsComputed.length - 1
     if (this.arrowsIndex < 0) {
       this.arrowsIndex = end
@@ -25,16 +30,25 @@ export default {
 
     const itemByArrowsIndex = this.itemsComputed[this.arrowsIndex]
 
-    if (this.arrowsDisableInstantSelection) {
+    if (this.arrowsDisableInstantSelection) { // подсвечивает элемент
       this.selectedItemByArrows = itemByArrowsIndex
-    } else {
+    } else { // сразу выбирает элемент
       this.setSearchData('')
       this.selectedItem = itemByArrowsIndex
 
       this.fireSelectEvent(this.selectedItem)
     }
 
-    e.preventDefault()
+    if (this.scrollToItemIfNeeded) { // Прокурутка к элементу
+      this.$nextTick(() => {
+        const selectedElement = this.$refs.items[this.arrowsIndex]
+
+        // на всякий случай (это не ожидаемое поведение)
+        if (!selectedElement) return
+
+        scrollIfNeeded(selectedElement, this.$refs['IZ-select__menu-items'])
+      })
+    }
   },
   onEnter () {
     if (this.hasMenu) {

diff --git a/src/helpers.js b/src/helpers.js
@@ -14,3 +14,15 @@ export function getOffsetSum (elem) {
 
   return { top: Math.round(top), left: Math.round(left) }
 }
+
+export function scrollIfNeeded (element, container) {
+  if (element.offsetTop < container.scrollTop) {
+    container.scrollTop = element.offsetTop
+  } else {
+    const offsetBottom = element.offsetTop + element.offsetHeight
+    const scrollBottom = container.scrollTop + container.offsetHeight
+    if (offsetBottom > scrollBottom) {
+      container.scrollTop = offsetBottom - container.offsetHeight
+    }
+  }
+}
diff --git a/src/props.js b/src/props.js
@@ -125,5 +125,10 @@ export default {
     type: Boolean,
     default: false,
     note: 'disable the selection of the first item from the list of items in menu when to press enter (when no item is selected)'
+  },
+  scrollToItemIfNeeded: {
+    type: Boolean,
+    default: true,
+    note: 'to scroll to an item if it has moved beyond the scroll bar'
   }
 }