Search code examples
javascriptcssangularjsgoogle-chromeui-select

AngularJS UI-Select tagging doesn't work for new tag in Google Chrome

I am using ui-select v0.19.6 in my project with AngularJS (v1.x)

I have following code for displaying a component where a user either can pick from the existing dropdown or create a new tag.

<div class="col-md-12 form-group">
    <label>Select Tags</label>
    <ui-select multiple tagging="true" tagging-label="(new tag)"
               ng-model="selectedTags.tags"
               theme="bootstrap" ng-disabled="false"
               close-on-select="false">
        <ui-select-match placeholder="Select tags...">{{$item}}</ui-select-match>
        <ui-select-choices refresh="getTagSuggestions($select.search)"
                           refresh-delay="0"
                           repeat="tag in (tags| filter: $select.search)">
            <div ng-bind="tag"></div>
        </ui-select-choices>
    </ui-select>
</div>

This works very well in Firefox but doesn't work with Google Chrome and Safari.

Here is the plukr with the problem https://plnkr.co/edit/1dj7j1Igcp9CrhWFqCGf?p=preview

Steps to reproduce the issue:

Copy any text example "Google" into your clipboard. Paste the copied text to the input field.

Expected behaviour: UI-select should open a dropdown with option "Google (new)".

But it doesn't prompt anything. If you just edit (click backspace) the text after coping, it displays the dropdown. So not sure whats going wrong here.

This works well in Firefox though.

Solution

  • There seems some issue how ui-select handles different keys to avoid showing dropdown.

    The fix is available in this repo: https://github.com/jkjha/ui-select

    If you are using bower, you can add this package:

    bower install [email protected]