@eturnity/eturnity_reusable_components 9.19.4 → 9.19.5

package/src/components/inputs/select/index.vue

@@ -50,10 +50,10 @@
             buttonBgColor
               ? buttonBgColor
               : colorMode == 'dark'
-                ? 'transparentBlack1'
-                : colorMode == 'transparent'
-                  ? 'transparent'
-                  : 'white'
+              ? 'transparentBlack1'
+              : colorMode == 'transparent'
+              ? 'transparent'
+              : 'white'
           "
           class="select-button"
           :color-mode="colorMode"
@@ -101,6 +101,7 @@
             input-height="34px"
             :input-width="computedWidth"
             :no-border="true"
+            :placeholder="searchPlaceholder"
             tabindex="0"
             :value="textSearch"
             @click.stop
@@ -109,6 +110,7 @@
           />
           <Selector
             v-else
+            :allow-wrap="selectorAllowWrap"
             :disabled="disabled"
             :padding-left="paddingLeft"
             :select-width="selectWidth"
@@ -120,27 +122,22 @@
             v-if="showCaret"
             class="caret_dropdown"
             :color-mode="colorMode"
+            :sidebar-caret="caretIcons === 'sidebar'"
             @click.stop="toggleCaretDropdown"
           >
             <Icon
               v-if="isDropdownOpen"
-              :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-              name="arrow_up"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              :color="caretResolvedColor"
+              :hovered-color="caretHoveredColor"
+              :name="caretOpenIconName"
+              :size="caretIconPixelSize"
             />
             <Icon
               v-else
-              :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-              name="arrow_down"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
+              :color="caretResolvedColor"
+              :hovered-color="caretHoveredColor"
+              :name="caretClosedIconName"
+              :size="caretIconPixelSize"
             />
           </Caret>
         </SelectButton>
@@ -158,6 +155,7 @@
                   : 'white'
               "
               class="rc-select-dropdown"
+              :dropdown-match-max-content="dropdownMatchMaxContent"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -171,11 +169,11 @@
                 colorMode == 'dark'
                   ? '#000000'
                   : colorMode == 'transparent'
-                    ? 'grey6'
-                    : dropdownBgColor
+                  ? 'grey6'
+                  : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
-              :hovered-value="hoveredValue"
+              :hovered-value="hoveredValueDomAttr"
               :is-active="isActive"
               :is-fixed-dropdown-position="isFixedDropdownPosition"
               :is-parent-modal="isParentModal"
@@ -200,6 +198,35 @@
             >
               <!-- When deferDropdownSlotContent is true, slot VNodes are not created until the
                    dropdown opens — avoids mounting huge option lists (e.g. library filters). -->
+              <DropdownSearchShell v-if="isDropdownSearchVisible" @click.stop>
+                <DropdownSearchRow>
+                  <DropdownSearchInputWrap>
+                    <InputText
+                      ref="dropdownSearchInput"
+                      background-color="transparent"
+                      :data-qa-id="
+                        dataQaId ? `${dataQaId}_dropdown_search` : undefined
+                      "
+                      :font-color="'eturnityGrey'"
+                      :font-size="fontSize"
+                      input-height="30px"
+                      input-width="100%"
+                      :no-border="true"
+                      :placeholder="searchPlaceholder"
+                      tabindex="0"
+                      :value="textSearch"
+                      @click.stop
+                      @input-change="searchChange"
+                      @keydown.stop="onKeyDown"
+                    />
+                  </DropdownSearchInputWrap>
+                  <Icon
+                    :color="dropdownSearchIconColor"
+                    name="search"
+                    size="16px"
+                  />
+                </DropdownSearchRow>
+              </DropdownSearchShell>
               <slot
                 v-if="!deferDropdownSlotContent || isSelectDropdownShown"
                 name="dropdown"
@@ -247,6 +274,7 @@
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
   import Icon from '../../icon'
+  import theme from '../../../assets/theme.js'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
@@ -255,15 +283,23 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const CaretAttrs = { colorMode: String }
+  const CaretAttrs = { colorMode: String, sidebarCaret: Boolean }
   const Caret = styled('div', CaretAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+      props.sidebarCaret
+        ? '24px'
+        : props.colorMode === 'transparent'
+        ? '15px'
+        : CARET_WIDTH};
     min-width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+      props.sidebarCaret
+        ? '24px'
+        : props.colorMode === 'transparent'
+        ? '15px'
+        : CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -271,6 +307,7 @@
   `
 
   const selectorProps = {
+    allowWrap: Boolean,
     disabled: Boolean,
     selectWidth: String,
     paddingLeft: String,
@@ -280,7 +317,19 @@
     color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
     ${(props) =>
       props.selectWidth === '100%'
-        ? 'width: 100%;'
+        ? props.allowWrap
+          ? `
+    width: 100%;
+    min-width: 0;
+    overflow: visible;
+    white-space: normal;
+  `
+          : `
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `
         : `width: calc(${props.selectWidth} -
       (
         ${CARET_WIDTH} +
@@ -365,32 +414,32 @@
           ? 'padding: 10px 15px 10px 5px;'
           : 'padding: 10px 15px;'
         : props.isSearchBarVisible
-          ? ''
-          : `padding-left: ${
-              props.hasNoPadding
-                ? '0'
-                : props.tablePaddingLeft
-                  ? props.tablePaddingLeft
-                  : props.paddingLeft
-            }`};
+        ? ''
+        : `padding-left: ${
+            props.hasNoPadding
+              ? '0'
+              : props.tablePaddingLeft
+              ? props.tablePaddingLeft
+              : props.paddingLeft
+          }`};
     text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
         : props.selectMinHeight
-          ? props.selectMinHeight
-          : props.height
-            ? props.height
-            : '36px'};
+        ? props.selectMinHeight
+        : props.height
+        ? props.height
+        : '36px'};
     display: flex;
     align-items: center;
-    height: ${(props) => props.selectHeight};
+    ${(props) => (props.selectHeight ? `height: ${props.selectHeight};` : '')}
     ${({ showBorder, theme, hasError }) =>
       showBorder &&
       `
     border: ${BORDER_WIDTH} solid ${
-      hasError ? theme.colors.red : theme.colors.grey4
-    }
+        hasError ? theme.colors.red : theme.colors.grey4
+      }
   `}
     opacity: ${(props) =>
       props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
@@ -398,18 +447,18 @@
       props.colorMode === 'transparent'
         ? 'transparent'
         : props.disabled && props.showDisabledBackground
-          ? props.theme.colors.grey5
-          : props.theme.colors[props.bgColor]
-            ? props.theme.colors[props.bgColor]
-            : props.bgColor} !important;
+        ? props.theme.colors.grey5
+        : props.theme.colors[props.bgColor]
+        ? props.theme.colors[props.bgColor]
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white
         : props.disabled && props.showDisabledBackground
-          ? props.theme.colors.black
-          : props.theme.colors[props.fontColor]
-            ? props.theme.colors[props.fontColor]
-            : props.fontColor};
+        ? props.theme.colors.black
+        : props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
     overflow: hidden;
     & > .handle {
@@ -433,6 +482,7 @@
     isParentModal: Boolean,
     isFixedDropdownPosition: Boolean,
     isTeleport: Boolean,
+    dropdownMatchMaxContent: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
@@ -458,8 +508,8 @@
       props.minWidth
         ? props.minWidth
         : props.optionWidth
-          ? props.optionWidth
-          : '100%'};
+        ? props.optionWidth
+        : '100%'};
     background-color: ${(props) =>
       props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
@@ -470,6 +520,13 @@
         : props.fontColor};
     max-height: 300px;
     overflow-y: auto;
+    ${(props) =>
+      props.dropdownMatchMaxContent
+        ? `
+      overflow-x: visible;
+      align-items: stretch;
+    `
+        : ''}
     & > div[data-value='${(props) => props.hoveredValue}'] {
       background-color: ${(props) =>
         props.theme.colors[props.hoveredBgColor]
@@ -483,6 +540,29 @@
   const DropdownWrapper = styled('div', DropdownAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   `
+
+  const DropdownSearchShell = styled.div`
+    flex-shrink: 0;
+    align-self: stretch;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 10px 10px;
+  `
+  const DropdownSearchRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
+    border-radius: 8px;
+    background-color: ${(p) => p.theme.colors.white};
+  `
+  const DropdownSearchInputWrap = styled.div`
+    flex: 1;
+    min-width: 0;
+  `
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
@@ -503,6 +583,8 @@
   const DROPDOWN_HEIGHT_OFFSET = 4
   const DROPDOWN_TOP_OFFSET = 21
   const MIN_OPTION_LENGTH = 5
+  /** DOM `data-value` for options whose value is null/undefined (Vue otherwise drops the attribute). */
+  const RC_SELECT_DOM_NULL = '__rc_select_null__'
 
   const DROPDOWN_MENU_POSITIONS = {
     Automatic: 'automatic',
@@ -530,6 +612,9 @@
       Caret,
       Selector,
       InputText,
+      DropdownSearchShell,
+      DropdownSearchRow,
+      DropdownSearchInputWrap,
       Teleport,
       DraggableInputHandle,
       IsRequiredLabelStar,
@@ -683,6 +768,19 @@
         type: Boolean,
         default: true,
       },
+      selectorAllowWrap: {
+        type: Boolean,
+        default: false,
+      },
+      dropdownMatchMaxContent: {
+        type: Boolean,
+        default: false,
+      },
+      caretIcons: {
+        type: String,
+        default: 'default',
+        validator: (v) => ['default', 'sidebar'].includes(v),
+      },
       isDraggable: {
         type: Boolean,
         default: false,
@@ -702,6 +800,19 @@
         type: Number,
         default: MIN_OPTION_LENGTH,
       },
+      searchPlaceholder: {
+        type: String,
+        default: '',
+      },
+      searchPlacement: {
+        type: String,
+        default: 'trigger',
+        validator: (v) => ['trigger', 'dropdown'].includes(v),
+      },
+      dropdownSearchHideUnassigned: {
+        type: Boolean,
+        default: false,
+      },
       dropdownMenuPosition: {
         type: String,
         default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
@@ -752,7 +863,6 @@
     data() {
       return {
         selectedValue: null,
-        paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
         isDropdownOpen: false,
         isActive: false,
         textSearch: '',
@@ -772,6 +882,9 @@
       }
     },
     computed: {
+      paddingLeft() {
+        return this.isDraggable ? '30px' : this.leftPadding
+      },
       hasErrorMessage() {
         return this.errorMessage && this.errorMessage.length > 0
       },
@@ -780,11 +893,30 @@
       },
       isSearchBarVisible() {
         return (
+          this.searchPlacement !== 'dropdown' &&
+          this.isSearchable &&
+          this.optionLength >= this.minOptionLength &&
+          this.isDropdownOpen
+        )
+      },
+      isDropdownSearchVisible() {
+        return (
+          this.searchPlacement === 'dropdown' &&
           this.isSearchable &&
           this.optionLength >= this.minOptionLength &&
           this.isDropdownOpen
         )
       },
+      dropdownSearchIconColor() {
+        return theme.semanticColors.teal[800]
+      },
+      hoveredValueDomAttr() {
+        const h = this.hoveredValue
+        if (h === null || h === undefined) {
+          return RC_SELECT_DOM_NULL
+        }
+        return h
+      },
       computedWidth() {
         function removePX(item) {
           return Number(item.replace('px', ''))
@@ -824,6 +956,43 @@
       isParentModal() {
         return !!this.modalRef
       },
+      caretOpenIconName() {
+        return this.caretIcons === 'sidebar' ? 'chevron_up' : 'arrow_up'
+      },
+      caretClosedIconName() {
+        return this.caretIcons === 'sidebar' ? 'chevron_down' : 'arrow_down'
+      },
+      caretIconPixelSize() {
+        if (this.caretIcons === 'sidebar') {
+          return '10px'
+        }
+        return this.colorMode === 'transparent' ? '8px' : '12px'
+      },
+      caretResolvedColor() {
+        if (this.caretIcons === 'sidebar') {
+          if (this.caretColor) {
+            return this.caretColor
+          }
+          if (this.colorMode == 'dark' || this.colorMode == 'transparent') {
+            return 'white'
+          }
+          return theme.semanticColors.teal[800]
+        }
+        return this.caretColor ||
+          this.colorMode == 'dark' ||
+          this.colorMode == 'transparent'
+          ? 'white'
+          : 'transparentBlack1'
+      },
+      caretHoveredColor() {
+        if (this.caretIcons !== 'sidebar') {
+          return undefined
+        }
+        if (this.colorMode == 'dark' || this.colorMode == 'transparent') {
+          return undefined
+        }
+        return theme.semanticColors.purple[500]
+      },
     },
     watch: {
       value(val) {
@@ -842,6 +1011,7 @@
           // Deferred dropdown slot content mounts after initial open in some hosts.
           this.$nextTick(() => this.refreshOptionLength())
         } else {
+          this.$emit('on-dropdown-close')
           this.dropdownPosition.left = null
           this.optionLengthCount = 0
           if (this.animationFrameId) {
@@ -854,7 +1024,13 @@
         }
         if (val && this.isSearchable) {
           this.$nextTick(() => {
-            if (this.$refs.searchInput && !this.isMobileDevice) {
+            if (this.searchPlacement === 'dropdown') {
+              const ref = this.$refs.dropdownSearchInput
+              const input = ref?.$el?.querySelector?.('input')
+              if (input && !this.isMobileDevice) {
+                input.focus()
+              }
+            } else if (this.$refs.searchInput && !this.isMobileDevice) {
               this.$refs.searchInput.$el.querySelector('input').focus()
             }
           })
@@ -867,6 +1043,9 @@
         setTimeout(() => {
           this.refreshOptionLength()
           this.getDistanceBetweenSelectAndDropdownMenu()
+          if (this.dropdownMatchMaxContent) {
+            this.getDropdownWidth()
+          }
         }, 100)
       },
       selectTopPosition() {
@@ -886,6 +1065,9 @@
           this.calculateSelectTopPosition
         )
     },
+    updated() {
+      this.maybeReapplyDropdownSearchDomFilter()
+    },
     beforeMount() {
       this.selectedValue = this.value
       document.addEventListener(
@@ -938,10 +1120,12 @@
         this.searchChange('')
       },
       optionSelected(e) {
-        this.selectedValue = e
+        const normalized =
+          typeof e === 'string' ? this.parseOptionDataValue(e) : e
+        this.selectedValue = normalized
         this.closeDropdown()
         this.blur()
-        this.$emit('input-change', e)
+        this.$emit('input-change', normalized)
       },
       optionHovered: debounce(function (e) {
         this.hoveredValue = e
@@ -965,15 +1149,63 @@
       searchChange(value) {
         this.textSearch = value
         this.$emit('search-change', value)
-        const dropdownChildren = [...this.$refs.dropdown.$el.children]
-        dropdownChildren.forEach((el) => {
-          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-            el.style.display = 'none'
+        this.applyDropdownSearchDomFilter()
+        if (this.dropdownMatchMaxContent && this.isDropdownOpen) {
+          this.$nextTick(() => this.getDropdownWidth())
+        }
+      },
+      maybeReapplyDropdownSearchDomFilter() {
+        if (
+          !this.dropdownSearchHideUnassigned ||
+          this.searchPlacement !== 'dropdown' ||
+          !this.isSearchable ||
+          !this.isDropdownOpen ||
+          !(this.textSearch || '').trim()
+        ) {
+          return
+        }
+        this.applyDropdownSearchDomFilter()
+      },
+      applyDropdownSearchDomFilter() {
+        const root = this.$refs.dropdown?.$el
+        if (!root) return
+        const raw = this.textSearch ?? ''
+        const qTrim = raw.trim()
+        const nodes = [...root.querySelectorAll('[data-value]')]
+        if (!qTrim) {
+          nodes.forEach((el) => {
+            el.style.display = ''
+          })
+          return
+        }
+        const q = raw.toLowerCase()
+        const hideUnassignedWhenOthers =
+          this.dropdownSearchHideUnassigned &&
+          this.searchPlacement === 'dropdown'
 
-            return
+        let assignedMatchCount = 0
+        if (hideUnassignedWhenOthers) {
+          for (const el of nodes) {
+            if (
+              !this.isUnassignedOptionRow(el) &&
+              el.textContent.toLowerCase().includes(q)
+            ) {
+              assignedMatchCount++
+            }
           }
+        }
 
-          el.style.display = 'inherit'
+        nodes.forEach((el) => {
+          let show = el.textContent.toLowerCase().includes(q)
+          if (
+            show &&
+            hideUnassignedWhenOthers &&
+            this.isUnassignedOptionRow(el) &&
+            assignedMatchCount > 0
+          ) {
+            show = false
+          }
+          el.style.display = show ? '' : 'none'
         })
       },
       refreshOptionLength() {
@@ -991,6 +1223,36 @@
           ? dropdownEl.children[0].childElementCount
           : 0
       },
+      parseOptionDataValue(attr) {
+        if (attr == null) return null
+        const s = String(attr)
+        if (
+          s === RC_SELECT_DOM_NULL ||
+          s === '' ||
+          s === 'null' ||
+          s === 'undefined'
+        ) {
+          return null
+        }
+        return attr
+      },
+      optionDataValuesEqual(domAttr, internalVal) {
+        const parsed = this.parseOptionDataValue(domAttr)
+        if (internalVal === parsed) return true
+        if (internalVal == null && parsed == null) return true
+        return String(internalVal) === String(parsed)
+      },
+      isUnassignedOptionRow(el) {
+        if (!el?.getAttribute) return false
+        const v = el.getAttribute('data-value')
+        return (
+          v === RC_SELECT_DOM_NULL ||
+          v == null ||
+          v === '' ||
+          v === 'null' ||
+          v === 'undefined'
+        )
+      },
       clickOutside(event) {
         const dropdownRef = this.$refs.dropdown
         if (!this.isClickOutsideActive) return
@@ -1014,10 +1276,20 @@
         } else if (e.key == 'ArrowUp') {
           this.onArrowPress(-1)
         } else if (e.key == 'Enter') {
-          const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-          ]
-          this.optionSelected(optionHoveredComponent.$el.dataset.value)
+          const root = this.$refs.dropdown?.$el
+          if (!root) return
+          const opts = [...root.querySelectorAll('[data-value]')].filter(
+            (el) => getComputedStyle(el).display !== 'none'
+          )
+          if (!opts.length) return
+          let idx = opts.findIndex((el) =>
+            this.optionDataValuesEqual(
+              el.getAttribute('data-value'),
+              this.hoveredValue
+            )
+          )
+          if (idx < 0) idx = 0
+          this.optionSelected(opts[idx].getAttribute('data-value'))
         }
       },
       // If some part of the dropdown menu is outside viewport of the bottom of the screen,
@@ -1108,24 +1380,79 @@
       async getDropdownWidth() {
         if (!this.$refs.select) return
         await this.$nextTick()
-        this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
+        if (
+          this.dropdownMatchMaxContent &&
+          this.isDropdownOpen &&
+          this.$refs.dropdown?.$el
+        ) {
+          await this.measureDropdownMaxContentWidth()
+        } else {
+          this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
+        }
+      },
+      async measureDropdownMaxContentWidth() {
+        const sel = this.$refs.select?.$el
+        const live = this.$refs.dropdown?.$el
+        if (!sel || !live) return
+        const selectW = Math.ceil(sel.getBoundingClientRect().width)
+        const ghost = live.cloneNode(true)
+        ghost.style.cssText = [
+          'position:fixed',
+          'left:-99999px',
+          'top:0',
+          'visibility:hidden',
+          'pointer-events:none',
+          'display:flex',
+          'flex-direction:column',
+          'align-items:stretch',
+          'width:min-content',
+          'min-width:min-content',
+          'max-height:none',
+          'overflow:visible',
+          'box-sizing:border-box',
+        ].join(';')
+        document.body.appendChild(ghost)
+        await this.$nextTick()
+        const measured = Math.ceil(ghost.scrollWidth)
+        document.body.removeChild(ghost)
+        this.dropdownWidth = `${Math.max(selectW, measured)}px`
       },
       onArrowPress(dir) {
-        let newHoveredElem
-        const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
-          `[data-value="${this.hoveredValue}"]`
+        const root = this.$refs.dropdown?.$el
+        if (!root) return
+        const opts = [...root.querySelectorAll('[data-value]')].filter(
+          (el) => getComputedStyle(el).display !== 'none'
         )
-        if (currentHoveredElem) {
-          if (dir > 0) {
-            newHoveredElem = currentHoveredElem.nextElementSibling
-          } else {
-            newHoveredElem = currentHoveredElem.previousElementSibling
-          }
-          if (newHoveredElem) {
-            this.hoveredValue = newHoveredElem.getAttribute('data-value')
-            const topPos = newHoveredElem.offsetTop
-            this.$refs.dropdown.$el.scrollTop = topPos
-          }
+        if (!opts.length) return
+        let idx = opts.findIndex((el) =>
+          this.optionDataValuesEqual(
+            el.getAttribute('data-value'),
+            this.hoveredValue
+          )
+        )
+        if (idx < 0) {
+          const newHoveredElem = dir > 0 ? opts[0] : opts[opts.length - 1]
+          this.hoveredValue = this.parseOptionDataValue(
+            newHoveredElem.getAttribute('data-value')
+          )
+          this.hoveredIndex =
+            opts.findIndex((el) =>
+              this.optionDataValuesEqual(
+                el.getAttribute('data-value'),
+                this.hoveredValue
+              )
+            ) + 1
+          root.scrollTop = newHoveredElem.offsetTop
+          return
+        }
+        const nextIdx = (idx + dir + opts.length) % opts.length
+        const newHoveredElem = opts[nextIdx]
+        if (newHoveredElem) {
+          this.hoveredValue = this.parseOptionDataValue(
+            newHoveredElem.getAttribute('data-value')
+          )
+          this.hoveredIndex = nextIdx + 1
+          root.scrollTop = newHoveredElem.offsetTop
         }
       },
       getDistanceBetweenSelectAndDropdownMenu() {