Opening the dropdown should scroll to the selected item.

[pietschy]

Currently the drop down opens at the first item. It would be better if it scrolled to ensure the current selection is visible.

A second issue exists in that moving the mouse over the dropdown to scroll clobbers the original active item so you can no longer tell what the selected item was (when using the selectize theme).

It would probably be better if the hover state was separate from the active state as mentioned in #282.

[starf]

It should indeed scroll to the selected item. +1

[Cornally]

For anyone in a pinch, the "_ensureHighlightVisible()" function is called whenever the user strikes a "vertical" key (e.g. up/down arrow). While I haven't run the tests yet, I've seen success executing the same logic inside the "ctrl.activate()" function's $timeout where focus is also set. Again, this is merely a bandaid.

[dimirc]

Will be solved with PR #1208
d2ce54c

[DerekDomino]

When reset-search-input is set to false in ui-select directive, the dropdown does not highlight/select nor scroll to the previously selected item.

[mgohin]

same as @DerekDomino

[MDziwny]

The PR #1208 has broken multiple selection with close-on-select=false, if the user use the mouse to select an item, then it goes back to the highlighted element.

For instance, the user wants to select X, Y and Z. He selects X with the mouse and the dropdown goes back to A (which is the current highlighted element)

[sonphnt]

Hi guys,

This does not work on Angular 1.5.7. I dont know if that is a problem. I am trying to debug the code, I dont understand at this line. Can you explain to me when 'if' statement occurred ? It always goes into 'if' condition with animate = true, so the else statement never triggered and _ensureHighlightVisible () never be called.

           `if (ctrl.$animate && ctrl.$animate.on && ctrl.$animate.enabled(container[0])) {
                  var animateHandler = function (elem, phase) {
                      if (phase === 'start' && ctrl.items.length === 0) {
                          // Only focus input after the animation has finished
                          ctrl.$animate.off('removeClass', searchInput[0], animateHandler);
                          $timeout(function () {
                              ctrl.focusSearchInput(initSearchValue);
                          });
                      } else if (phase === 'close') {
                          // Only focus input after the animation has finished
                          ctrl.$animate.off('enter', container[0], animateHandler);
                          $timeout(function () {
                              ctrl.focusSearchInput(initSearchValue);
                          });
                      }
                  };

                  if (ctrl.items.length > 0) {
                      ctrl.$animate.on('enter', container[0], animateHandler);

                  } else {
                      ctrl.$animate.on('removeClass', searchInput[0], animateHandler);
                  }
              } else {
                  $timeout(function () {
                      ctrl.focusSearchInput(initSearchValue);
                      if (!ctrl.tagging.isActivated && ctrl.items.length > 1) {
                          _ensureHighlightVisible();
                      }
                  });
              }``

[karas111]

Same as @sonphnt

I've created PR #1742 for this issue.

[noamiw]

Hi,
I am having an issue with the ui-select dropdown focus.
The dropdown opens at the last position it was closed, and not with the selected item fully visible.
I am using angular 1.5.8 and ui-select 0.19.6.

[kidroca]

Hello,
I've tracked down 2 cases that prevent the dropdown to scroll to to the selected item on open

Here is a plunk that reproduces the issue: https://plnkr.co/edit/n9jwLCyUv87Ba3vPgOvu

• angularjs: 1.6.1, 1.6.5
• uiSelect: 0.19.8

1. In combination with ngAnimate

• Add ngAnimate as module dependency
• Create an ui-select with ng-model that has initial value
• Click to toggle the dropdown open
• Not scrolled to active item

2. When configured with uiSelectConfig.resetSearchInput = false

• Configure ui-select with uiSelectConfig.resetSearchInput = false (or define on component)
• Create an ui-select with ng-model that has initial value
• Click to toggle the dropdown open
• Not scrolled to active item

[ghost]

Did anyone find a solution ? I have the same problem with the same angular and ui select versions as you

[kidroca]

You can use the fork I made for the pull request until they release a new version:

In package.json replace:
"ui-select": "^0.19.8"
with:
"ui-select": "git@github.com:kidroca/ui-select.git#v0.19.8-fork"

The run an npm-install

Fork: https://github.com/kidroca/ui-select/tree/v0.19.8-fork

[jpmnteiro]

@kidroca thank you, the fork works perfectly fine. Any word from the maintainers as to when we can expect this merged/solved on master?

[kidroca]

Glad you like it. We almost merged the changes last week, maybe track the pull request topic to know for sure: #2034