@formixru/b2b-ui 3.7.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.7.0",
+    "version": "4.1.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/base.scss

@@ -26,6 +26,13 @@
     --easing-deceleration: cubic-bezier(0, 0, 0.2, 1);
     --easing-acceleration: cubic-bezier(0.4, 0, 1, 1);
 
+    --input-delay: 300ms;
+    --change-delay: 900ms;
+    --loader-delay: 600ms;
+    --loader-delay-min: 300ms;
+    --loader-min-time: 600ms;
+    --fallback-timeout: 3000ms;
+
     @each $key, $value in $breakpoints {
         --breakpoint-#{$key}: #{$value};
     }

package/src/components/request/index.js

@@ -27,11 +27,24 @@ export const request = async ({
     url = '',
     method = 'GET',
     data = {},
+    signal,
     loader = true,
     showLoaderDelay,
-    hideLoaderOnSuccess = true,
+    hideLoaderOnSuccess: initialHideLoaderOnSuccess = true,
     interceptData = true,
+    ...unknownParams
 }) => {
+    let hideLoaderOnSuccess = initialHideLoaderOnSuccess;
+
+    const unknownKeys = Object.keys(unknownParams);
+    if (unknownKeys.length > 0) {
+        if (unknownKeys.length === 1) {
+            console.warn(`В функцию request передан неизвестный параметр: ${unknownKeys.join(', ')}`);
+        } else {
+            console.warn(`В функцию request переданы неизвестные параметры: ${unknownKeys.join(', ')}`);
+        }
+    }
+
     const reqUrl = new URL(url, location.origin);
     const options = {
         method,
@@ -39,7 +52,9 @@ export const request = async ({
             'X-Requested-With': 'XMLHttpRequest',
             'X-Session-Id': BX.message('bitrix_sessid'),
         },
+        signal,
     };
+
     if (method === 'GET') {
         let entries;
         if (data instanceof FormData) {
@@ -60,9 +75,11 @@ export const request = async ({
             options.headers['Content-Type'] = 'application/json';
         }
     }
+
     if (loader) {
         showLoader(showLoaderDelay);
     }
+
     try {
         const response = await fetch(reqUrl, options);
         if (!response.ok) {
@@ -78,9 +95,6 @@ export const request = async ({
             data = { content: raw };
         }
 
-        const shouldHideLoader = loader && hideLoaderOnSuccess;
-        let isLoaderHidden = false;
-
         if (isString(data.redirect)) {
             if (data.redirect) {
                 location.assign(data.redirect);
@@ -102,14 +116,14 @@ export const request = async ({
                 if ($dialog) {
                     $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
                     // Вызываем hideLoader так же как в основном компоненте - до функции show()
-                    if (shouldHideLoader && !isLoaderHidden) {
+                    if (loader) {
                         hideLoader();
-                        isLoaderHidden = true;
+                        hideLoaderOnSuccess = false;
                     }
                     await showDialog($dialog);
                     initRequestContent($dialog);
                 } else {
-                    console.error(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
+                    console.warn(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
                 }
             }
 
@@ -145,14 +159,14 @@ export const request = async ({
                 if ($sidebar) {
                     $sidebar.innerHTML = data.sidebar.content;
                     // Вызываем hideLoader так же как в основном компоненте - до функции show()
-                    if (shouldHideLoader && !isLoaderHidden) {
+                    if (loader) {
                         hideLoader();
-                        isLoaderHidden = true;
+                        hideLoaderOnSuccess = false;
                     }
                     await showSidebar($sidebar);
                     initRequestContent($sidebar);
                 } else {
-                    console.error(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
+                    console.warn(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
                 }
             }
 
@@ -187,7 +201,7 @@ export const request = async ({
                 if ($trigger) {
                     $trigger.click();
                 } else {
-                    console.error(`Элемент с селектором ${data.trigger} не найден`);
+                    console.warn(`Элемент с селектором ${data.trigger} не найден`);
                     if (loader) {
                         hideLoader();
                     }
@@ -195,7 +209,7 @@ export const request = async ({
             }
         }
 
-        if (shouldHideLoader && !isLoaderHidden) {
+        if (loader && hideLoaderOnSuccess) {
             hideLoader(isString(data.redirect) ? 3000 : undefined);
         }
 

package/src/components/search-input/index.scss

@@ -0,0 +1,74 @@
+@use '../../variables' as *;
+
+$b: '.search-input';
+
+#{$b} {
+    position: relative;
+
+    &__submit {
+        align-items: center;
+        display: flex;
+        height: 24px;
+        justify-content: center;
+        left: 12px;
+        position: absolute;
+        top: calc(50% - 12px);
+        width: 24px;
+    }
+
+    &__submit-icon {
+        fill: $search-input-submit-icon-color;
+        height: 16px;
+        width: 16px;
+
+        #{$b}__input:not(:placeholder-shown) ~ #{$b}__submit & {
+            fill: $search-input-submit-icon-active-color;
+        }
+    }
+
+    &__spinner {
+        container-type: size;
+        height: 16px;
+        width: 16px;
+    }
+
+    &__input {
+        padding-left: 44px;
+        width: 100%;
+    }
+
+    &__clear {
+        align-items: center;
+        background-color: $search-input-clear-bg;
+        border-bottom-right-radius: $search-input-clear-radius;
+        border-top-right-radius: $search-input-clear-radius;
+        color: $search-input-clear-color;
+        cursor: pointer;
+        display: flex;
+        height: $input-height - $input-border-width * 2;
+        justify-content: center;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+        width: $input-height - $input-border-width * 2;
+
+        .input_small ~ & {
+            height: $input-small-height - $input-border-width * 2;
+            width: $input-small-height - $input-border-width * 2;
+        }
+
+        &:hover,
+        &:focus-visible {
+            color: $search-input-clear-active-color;
+        }
+    }
+
+    &__clear-icon {
+        fill: currentcolor;
+        height: 16px;
+        width: 16px;
+    }
+}

package/src/components/search-input/index.vue

@@ -0,0 +1,112 @@
+<template>
+    <div ref="$root" class="search-input">
+        <input
+            ref="$input"
+            v-model="query"
+            class="search-input__input input"
+            :class="props.inputCssClasses"
+            :name="props.name"
+            type="text"
+            :placeholder="props.placeholder"
+            autocomplete="off"
+            @input="emit('input', $event)"
+            @focusin="emit('focusin', $event)"
+            @focusout="emit('focusout', $event)"
+            @keydown="emit('keydown', $event)"
+        />
+        <button
+            class="search-input__submit"
+            type="button"
+            @click="
+                updateModel();
+                emit('submit');
+            "
+        >
+            <span v-show="props.isLoading" class="search-input__spinner"><span class="spinner"></span></span>
+            <svg v-show="!props.isLoading" class="search-input__submit-icon">
+                <use :href="`${ICONS_PATH}#search`" />
+            </svg>
+        </button>
+        <button v-show="query.length > 0" class="search-input__clear" type="button" @click="query = ''">
+            <svg class="search-input__clear-icon"><use :href="`${ICONS_PATH}#close`" /></svg>
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { cssVar } from '@advdominion/css-var';
+import { debounce } from 'es-toolkit';
+import { ref, useTemplateRef, watch, watchEffect } from 'vue';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const emit = defineEmits(['input', 'focusin', 'focusout', 'keydown', 'submit']);
+const model = defineModel({ type: String, default: '' });
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: 'Поиск',
+    },
+    minlength: {
+        type: Number,
+        default: 3,
+    },
+    inputDelay: {
+        type: Number,
+        default() {
+            return cssVar('--input-delay');
+        },
+    },
+    inputCssClasses: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    isLoading: {
+        type: Boolean,
+    },
+});
+
+const $root = useTemplateRef('$root');
+const $input = useTemplateRef('$input');
+
+const query = ref(model.value);
+watchEffect(() => {
+    query.value = model.value;
+});
+
+const debouncedUpdateModel = debounce(() => {
+    model.value = query.value;
+}, props.inputDelay);
+
+const updateModel = () => {
+    debouncedUpdateModel.cancel();
+
+    if (query.value.length === 0) {
+        model.value = query.value;
+    } else if (query.value.length >= props.minlength) {
+        debouncedUpdateModel();
+    }
+};
+
+watch(query, (newQueryValue) => {
+    if (newQueryValue !== model.value) {
+        updateModel();
+    }
+});
+
+const focus = () => {
+    $input.value.focus();
+};
+
+defineExpose({
+    $root,
+    focus,
+});
+</script>

package/src/components/suggest-input/index.scss

@@ -19,7 +19,7 @@ $b: '.suggest-input';
         border-top-right-radius: $input-radius;
         container-type: size;
         height: $input-height - $input-border-width * 2;
-        padding: math.div($input-height - 4px * 5, 2);
+        padding: math.div($input-height - 20px, 2);
         position: absolute;
         right: $input-border-width;
         top: $input-border-width;
@@ -28,7 +28,7 @@ $b: '.suggest-input';
 
         .input_small ~ & {
             height: $input-small-height - $input-border-width * 2;
-            padding: math.div($input-small-height - 4px * 4, 2);
+            padding: math.div($input-small-height - 16px, 2);
             width: $input-small-height - $input-border-width * 2;
         }
     }
@@ -65,12 +65,12 @@ $b: '.suggest-input';
 
     &__clear-icon {
         fill: currentcolor;
-        height: 4px * 4;
-        width: 4px * 4;
+        height: 16px;
+        width: 16px;
 
         .input_small ~ #{$b}__clear & {
-            height: 4px * 3;
-            width: 4px * 3;
+            height: 12px;
+            width: 12px;
         }
     }
 
@@ -90,9 +90,9 @@ $b: '.suggest-input';
         @include dark-border-disable((top));
 
         @if $input-radius != 0 {
-            margin-top: -4px * 2;
-            max-height: $suggest-input-item-height * 5 + 4px * 2;
-            padding-top: 4px * 2;
+            margin-top: -8px;
+            max-height: $suggest-input-item-height * 5 + 8px;
+            padding-top: 8px;
         } @else {
             max-height: $suggest-input-item-height * 5;
         }
@@ -109,9 +109,6 @@ $b: '.suggest-input';
         display: flex;
         min-height: $suggest-input-item-height;
         padding: 4px $input-padding-x;
-        transition-duration: var(--duration-micro-s);
-        transition-property: background-color, color;
-        transition-timing-function: var(--easing-standard);
 
         @include font($suggest-input-item-font);
 

package/src/components/suggest-input/index.vue

@@ -1,29 +1,39 @@
 <template>
     <div ref="$root" class="suggest-input" @keydown.esc="esc()">
+        <SearchInput
+            v-if="props.searchInput"
+            v-model="model"
+            class="suggest-input__input"
+            :class="[showSuggests ? 'suggest-input__input_active' : '']"
+            :placeholder="props.placeholder"
+            :minlength="0"
+            :input-delay="0"
+            :input-css-classes="props.inputCssClasses"
+            :is-loading="isLoading"
+            @input="handleInput()"
+            @focusin="focusin()"
+            @focusout="focusout($event)"
+            @keydown="arrowNavigation($event)"
+        />
         <input
-            :id="id"
-            ref="$input"
+            v-else
+            :id="props.id"
             v-model="model"
             class="suggest-input__input input"
-            :class="[
-                showSuggests ? 'suggest-input__input_active' : '',
-                small ? 'input_small' : '',
-                error ? 'input_error' : '',
-                ...inputCssClasses,
-            ]"
+            :class="[showSuggests ? 'suggest-input__input_active' : '', ...props.inputCssClasses]"
             type="text"
-            :name="name"
-            :required="required"
-            :disabled="disabled"
-            :placeholder="placeholder"
+            :name="props.name"
+            :required="props.required"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
             autocomplete="off"
             @input="handleInput()"
             @focusin="focusin()"
             @focusout="focusout($event)"
             @keydown="arrowNavigation($event)"
         />
-        <div v-show="isLoading" class="suggest-input__loader"><div class="spinner"></div></div>
-        <button v-show="isClearVisible" ref="$clear" class="suggest-input__clear" type="button" @click="clear()">
+        <div v-show="isLoading && !props.searchInput" class="suggest-input__loader"><div class="spinner"></div></div>
+        <button v-show="isClearVisible && !props.searchInput" ref="$clear" class="suggest-input__clear" type="button" @click="clear()">
             <svg class="suggest-input__clear-icon"><use :href="`${ICONS_PATH}#close`" /></svg>
         </button>
         <div v-show="showSuggests" ref="$list" class="suggest-input__list" @mouseover="focusSuggestIndex = -1">
@@ -36,22 +46,23 @@
                     tabindex="0"
                     @click="select(item)"
                 >
-                    <span v-if="hightlightMatches" v-html="item.formatted_label"></span>
+                    <span v-if="props.hightlightMatches" v-html="item.formatted_label"></span>
                     <span v-else v-html="item.label"></span>
                 </div>
             </template>
-            <div v-else class="suggest-input__not-found" v-html="notFoundMessage"></div>
+            <div v-else class="suggest-input__not-found" v-html="props.notFoundMessage"></div>
         </div>
         <slot name="content"></slot>
     </div>
 </template>
 
 <script setup>
-/* globals BX */
+import { cssVar } from '@advdominion/css-var';
+import { debounce } from 'es-toolkit';
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 
-import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
-
-import { errorHandler } from '../../utils/error-handler.js';
+import { request } from '../request/index.js';
+import SearchInput from '../search-input/index.vue';
 
 const ICONS_PATH = window.ICONS_PATH;
 
@@ -90,9 +101,11 @@ const props = defineProps({
         type: Number,
         default: 3,
     },
-    throttle: {
+    inputDelay: {
         type: Number,
-        default: 1000,
+        default() {
+            return cssVar('--input-delay');
+        },
     },
     inputCssClasses: {
         type: Array,
@@ -107,34 +120,32 @@ const props = defineProps({
         type: String,
         default: 'По&nbsp;вашему запросу ничего не&nbsp;найдено',
     },
-    small: {
-        type: Boolean,
+    loaderDelay: {
+        type: Number,
+        default() {
+            return cssVar('--loader-delay-min');
+        },
     },
-    error: {
+    loaderMinTime: {
+        type: Number,
+        default() {
+            return cssVar('--loader-min-time');
+        },
+    },
+    suggestsTimeout: {
+        type: Number,
+        default() {
+            return cssVar('--fallback-timeout');
+        },
+    },
+    searchInput: {
         type: Boolean,
     },
 });
 
-const {
-    id,
-    name,
-    placeholder,
-    required,
-    disabled,
-    action,
-    queryName,
-    minlength,
-    throttle,
-    inputCssClasses,
-    hightlightMatches,
-    small,
-    notFoundMessage,
-} = toRefs(props);
-
-const $root = ref();
-const $input = ref();
-const $list = ref();
-const $clear = ref();
+const $root = useTemplateRef('$root');
+const $list = useTemplateRef('$list');
+const $clear = useTemplateRef('$clear');
 
 const suggests = ref([]);
 const formattedSuggests = ref([]);
@@ -144,7 +155,7 @@ watch(suggests, () => {
     focusSuggestIndex.value = -1;
     const regexp = new RegExp(model.value, 'i');
     formattedSuggests.value = suggests.value.map((item) => {
-        if (hightlightMatches.value) {
+        if (props.hightlightMatches) {
             const match = regexp.exec(item.label);
             item.formatted_label = match ? item.label.replace(match[0], `<mark>${match[0]}</mark>`) : item.label;
         }
@@ -153,79 +164,92 @@ watch(suggests, () => {
 });
 
 const showSuggests = ref(false);
-const itemHeight = ref(0);
 
 watch(showSuggests, async (value) => {
-    if (value && suggests.value.length > 0) {
-        await nextTick();
-        itemHeight.value = $list.value.querySelector('.suggest-input__list-item').offsetHeight;
-    } else {
+    if (!value) {
         suggests.value = [];
-        await nextTick();
-        itemHeight.value = 0;
     }
 });
 
-const maxItemsWithoutScroll = computed(() => {
-    if (itemHeight.value) {
-        return Math.floor($list.value.offsetHeight / itemHeight.value);
-    }
-    return 0;
-});
+const isLoading = ref(false);
+const isClearVisible = computed(() => model.value.length >= props.minlength && !isLoading.value);
 
-const indexesToScroll = computed(() => {
-    if (maxItemsWithoutScroll.value) {
-        const indexes = [0];
-        for (const index of suggests.value.keys()) {
-            const nextIndex = indexes.at(-1) + maxItemsWithoutScroll.value;
-            if (nextIndex > suggests.value.length) {
-                break;
-            }
-            if (index === nextIndex) {
-                indexes.push(index);
+let controllerDaData;
+let abortTimeout;
+let loaderTimeout;
+let loaderStartTime = 0;
+
+const getSuggests = async (query) => {
+    const currentController = new AbortController();
+    controllerDaData = currentController;
+
+    clearTimeout(abortTimeout);
+    abortTimeout = setTimeout(() => {
+        currentController.abort();
+    }, props.suggestsTimeout);
+
+    // Добавляем небольшую задержку, чтобы лодер не показывался на быстрых ответах
+    clearTimeout(loaderTimeout);
+    loaderTimeout = setTimeout(() => {
+        if (currentController === controllerDaData) {
+            isLoading.value = true;
+            loaderStartTime = Date.now();
+        }
+    }, props.loaderDelay);
+
+    try {
+        const url = new URL(props.action, location.origin);
+        url.searchParams.append(props.queryName, query);
+
+        const data = await request({
+            url,
+            loader: false,
+            interceptData: false,
+            signal: currentController.signal,
+        });
+
+        if (currentController !== controllerDaData) {
+            return;
+        }
+
+        if (data) {
+            suggests.value = data;
+            showSuggests.value = true;
+        }
+    } finally {
+        if (currentController === controllerDaData) {
+            clearTimeout(abortTimeout);
+            controllerDaData = undefined;
+
+            clearTimeout(loaderTimeout);
+            if (isLoading.value) {
+                // Если показали лоадер, то убеждаемся, что он будет показываться какое-то мин. время, чтобы избежать миганий
+                const displayTime = Date.now() - loaderStartTime;
+                const remainingTime = Math.max(0, props.loaderMinTime - displayTime);
+                setTimeout(() => {
+                    isLoading.value = false;
+                    loaderStartTime = 0;
+                }, remainingTime);
             }
         }
-        return indexes;
     }
-    return [];
-});
+};
 
-const isLoading = ref(false);
-const isClearVisible = computed(() => model.value.length >= minlength.value && !isLoading.value);
+const _debouncedGetSuggests = debounce(getSuggests, props.inputDelay);
 
-let throttleTimeout;
+const cancelRequest = () => {
+    _debouncedGetSuggests.cancel();
+    controllerDaData?.abort();
+    clearTimeout(abortTimeout);
+    clearTimeout(loaderTimeout);
+    isLoading.value = false;
+};
 
 const handleInput = () => {
-    clearTimeout(throttleTimeout);
-    if (model.value.length >= minlength.value) {
-        throttleTimeout = setTimeout(async () => {
-            isLoading.value = true;
-            const url = new URL(action.value, location.origin);
-            url.searchParams.append(queryName.value, model.value);
-            try {
-                const response = await fetch(url, {
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest',
-                        'X-Session-Id': BX.message('bitrix_sessid'),
-                    },
-                });
-                if (!response.ok) {
-                    throw response;
-                }
-                const data = await response.json();
-                isLoading.value = false;
-                suggests.value = data;
-                showSuggests.value = true;
-            } catch (error) {
-                if (error.status === 401) {
-                    location.reload();
-                } else {
-                    isLoading.value = false;
-                    errorHandler(error);
-                }
-            }
-        }, throttle.value);
+    if (model.value.length >= props.minlength) {
+        _debouncedGetSuggests(model.value);
     } else {
+        cancelRequest();
         showSuggests.value = false;
     }
 };
@@ -238,6 +262,7 @@ const focusin = async () => {
 
 const focusout = async ({ relatedTarget }) => {
     if (!relatedTarget || (!$list.value.contains(relatedTarget) && !$clear.value.contains(relatedTarget))) {
+        cancelRequest();
         showSuggests.value = false;
     }
     await nextTick();
@@ -245,6 +270,7 @@ const focusout = async ({ relatedTarget }) => {
 };
 
 const esc = () => {
+    cancelRequest();
     // Ждём, чтобы событие нажатия Esc сработало у других обработчиков (например, в диалоговых окнах)
     setTimeout(() => {
         showSuggests.value = false;
@@ -252,12 +278,13 @@ const esc = () => {
 };
 
 const clear = () => {
-    clearTimeout(throttleTimeout);
+    cancelRequest();
     model.value = '';
     showSuggests.value = false;
 };
 
 const select = ({ label, value }) => {
+    cancelRequest();
     model.value = label;
     showSuggests.value = false;
     emit('select', {
@@ -266,44 +293,46 @@ const select = ({ label, value }) => {
     });
 };
 
-const arrowNavigation = (event) => {
+const arrowNavigation = async (event) => {
     if (showSuggests.value) {
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-            const selectionStart = $input.value.selectionStart;
-            const selectionEnd = $input.value.selectionEnd;
-            setTimeout(() => {
-                $input.value.setSelectionRange(selectionStart, selectionEnd);
-            });
+            event.preventDefault();
+
             switch (event.key) {
                 case 'ArrowDown': {
                     focusSuggestIndex.value =
                         suggests.value.length === focusSuggestIndex.value + 1 ? 0 : focusSuggestIndex.value + 1;
-                    if (
-                        focusSuggestIndex.value !== 0 &&
-                        focusSuggestIndex.value !== suggests.value.length - 1 &&
-                        indexesToScroll.value.includes(focusSuggestIndex.value)
-                    ) {
-                        $list.value.scrollTop += maxItemsWithoutScroll.value * itemHeight.value;
-                    } else if (focusSuggestIndex.value === 0) {
-                        $list.value.scrollTop = 0;
-                    }
                     break;
                 }
                 case 'ArrowUp': {
                     focusSuggestIndex.value =
                         focusSuggestIndex.value <= 0 ? suggests.value.length - 1 : focusSuggestIndex.value - 1;
-                    if (
-                        focusSuggestIndex.value !== 0 &&
-                        focusSuggestIndex.value !== suggests.value.length - 1 &&
-                        indexesToScroll.value.includes(focusSuggestIndex.value + 1)
-                    ) {
-                        $list.value.scrollTop -= maxItemsWithoutScroll.value * itemHeight.value;
-                    } else if (focusSuggestIndex.value === suggests.value.length - 1) {
-                        $list.value.scrollTop = suggests.value.length * itemHeight.value;
-                    }
                     break;
                 }
             }
+
+            await nextTick();
+
+            const activeElement = $list.value?.querySelectorAll('.suggest-input__list-item')[focusSuggestIndex.value];
+            if (activeElement && $list.value) {
+                const containerRect = $list.value.getBoundingClientRect();
+                const elemRect = activeElement.getBoundingClientRect();
+
+                // У $list задан paddint-top, получаем его значение
+                const paddingTop = Number.parseInt(getComputedStyle($list.value).paddingTop) || 0;
+                // Верхняя видимая граница = реальные координаты + отступ
+                const visibleTop = containerRect.top + paddingTop;
+
+                if (focusSuggestIndex.value === 0) {
+                    $list.value.scrollTop = 0;
+                } else if (focusSuggestIndex.value === suggests.value.length - 1) {
+                    $list.value.scrollTop = $list.value.scrollHeight;
+                } else if (elemRect.top < visibleTop) {
+                    $list.value.scrollTop -= visibleTop - elemRect.top;
+                } else if (elemRect.bottom > containerRect.bottom) {
+                    $list.value.scrollTop += elemRect.bottom - containerRect.bottom;
+                }
+            }
         }
         if (event.key === 'Enter' && focusSuggestIndex.value >= 0) {
             // Ждём, чтобы событие нажатия Enter сработало у других обработчиков (например, в формах)

package/src/variables.scss

@@ -581,8 +581,18 @@ $input-textarea-small-min-height: 72px !default;
 
 /********** Поле ввода пароля (.password) **********/
 
-$password-color: $color-grey-40;
-$password-active-color: $color-primary-40;
+$password-color: $color-grey-40 !default;
+$password-active-color: $color-primary-40 !default;
+
+/********** Поле поиска (.search-input) **********/
+
+$search-input-submit-icon-color: $color-grey-70 !default;
+$search-input-submit-icon-active-color: $color-error !default;
+
+$search-input-clear-bg: $color-white !default;
+$search-input-clear-radius: $input-radius !default;
+$search-input-clear-color: $color-grey-70 !default;
+$search-input-clear-active-color: $color-grey-40 !default;
 
 /********** Поле ввода с подсказкамми (.suggest-input) **********/