При наведении курсора на элемент в раскрывающемся меню он автоматически прокручивается вниз. - PullRequest
Новая
       10

При наведении курсора на элемент в раскрывающемся меню он автоматически прокручивается вниз.

0 голосов
/ 22 января 2019

Когда мы вводим некоторый текст в текстовое поле, он совпадает со списком и отображает раскрывающееся меню (мы используем библиотеку JavaScript Typeahead для достижения этой цели).Это работает, как и ожидалось.

Проблема возникает, когда я указываю мышью на 2-й элемент в раскрывающемся меню, он автоматически прокручивается вниз до конца списка.

Например: предположиму нас есть 5 пунктов в выпадающем меню, и если мы наводим курсор на 2-й элемент, выпадающее меню автоматически прокручивается вниз до последнего элемента.

Таким образом, в результате не удалось выбрать 2-й элемент.Как раскрывающееся меню автоматически прокручивается вниз.

Как можно избежать автоматического прокручивания выпадающего меню вниз при наведении мыши.

HTML: 

<input type="text" 
        typeahead="data for data in getData()" 
        typeahead-on-select="setData($item, index)" 
        typeahead-min-length="1" 
        typeahead-select-on-blur="true" 
        aria-autocomplete="list" 
        aria-expanded="true" 
        aria-owns="typeahead-048-3181" 
        aria-activedescendant="typeahead-048-3181-option-1" />



        <ul class="dropdown-menu ng-isolate-scope" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block; top: 982px; left: 31px;" role="listbox" aria-hidden="false" typeahead-popup="" id="typeahead-048-3181" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position">
            <!-- ngRepeat: match in matches track by $index -->
            <li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-0" class="ng-scope">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data1</a>
            </li><!-- end ngRepeat: match in matches track by $index -->
            <li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-1" class="ng-scope active">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data2</a>
            </li><!-- end ngRepeat: match in matches track by $index --><li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-2" class="ng-scope">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data3</strong>34</a>
            </li><!-- end ngRepeat: match in matches track by $index -->
        </ul>

CSS: 

.dropdown-menu > li > a {
    padding: 10px 20px;
    white-space: normal;
    color: #494c61 !important;
    cursor: pointer;
}

.dropdown-menu {
    margin-top: 0px;
    width: 91%;
    overflow-y: auto;
    max-height: 200px;
}

JavaScript: директива AngularJS: shouldFocus 

return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
                    if (newVal && element.prop("class").indexOf("active")) {
                        var par = element.parent("ul");
                        var scrollingTo = element.offset().top - par.offset().top + par.scrollTop();
                        par.scrollTop(scrollingTo);
                    }
                });
            }
        }
...