Angular ui-select需点击两次才能激活输入框问题求助

Hey there! I see you're new to Angular and stuck with a frustrating ui-select problem—having to click twice just to get the input box ready for typing. Let's walk through some targeted fixes based on your code:

Possible Causes & Solutions #

1. Simplify the ui-select-match Template #

Your current ui-select-match uses two separate <span> elements with ng-if conditions. This dynamic DOM switching might be messing with how the input box receives focus on the first click. Let's streamline it into a cleaner single expression:

<ui-select ng-model="page.model.form.relatedItem" theme="bootstrap">
  <ui-select-match placeholder="Search ...">
    <!-- Combine both conditions into one to avoid DOM toggling -->
    <span ng-bind="$select.selected.name || page.model.form.relatedItem.name"></span>
  </ui-select-match>
  <ui-select-choices refresh="page.getRelatedItemList($select.search)" refresh-delay="0" group-by="'group'" repeat="item in page.itemArray | filter: $select.search">
    <span ng-bind-html="item.name | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>

Removing the ng-if blocks eliminates unnecessary DOM changes that could delay focus from reaching the input field.

2. Force Focus with a Custom Click Handler #

If the first fix doesn't work, we can manually trigger focus on ui-select's internal input box when the component is clicked.

First, add this method to your controller:

page.focusUiSelectInput = function() {
  // Use setTimeout to wait for Angular's digest cycle to finish
  setTimeout(function() {
    const searchInput = document.querySelector('.ui-select-search');
    if (searchInput) {
      searchInput.focus();
    }
  }, 0);
};

Then update your ui-select tag to call this method on click:

<ui-select ng-model="page.model.form.relatedItem" theme="bootstrap" ng-click="page.focusUiSelectInput()">
  <!-- Keep your existing match and choices templates here -->
</ui-select>

This ensures the input box gets focus immediately after the component is clicked, so the cursor appears right away.

3. Check Version Compatibility #

Double-check that your ui-select version is compatible with your Angular version. Older releases of ui-select had known focus-related bugs, so upgrading to the latest stable version might resolve the issue outright.

4. Rule Out External Event Interference #

Make sure there aren't any global click handlers or custom directives on your page that could be intercepting or blocking the default focus behavior of the ui-select component.

Start with simplifying the template first—it's the most straightforward fix. Give these solutions a try and let me know if any of them get your ui-select working as expected! 😊

内容的提问来源于stack exchange，提问作者Prad2791