Allow creation of a new tag on blur

[sslepian]

When using ui-select to allow users to create new tags (for example, a list of email addresses), blurring the input field should automatically add that tag, to cover the case where the user enters a new tag but forgets to hit "enter" before submitting the form.

[brianfeister]

From a user experience perspective, I honestly don't agree that's the correct behavior. Blur should not fire unexpected events without an explicit action.

[Patrik-Lundqvist]

I think this should be an optional functionality. From a ux perspective it's sometimes hard for users to understand that they have to press enter in the input field for a new tag to show up, and one could argue that deleting the entered text on blur is an "unexpected event without an explicit action". It can be countered by adding a new tag on blur, pivotal tracker does this for example.

[dimirc]

We should check this again since maybe to create on blur could be expected, for example I see that behavior on Gmail To/CC fields

[ajainarayanan]

👍 If this feature is considered. Its subjective that every user knows to press TAB or ENTER to have the value bound to that textbox/dropdown.

[mattmcardle]

Just submitted a pull request that will enable this, although I am not 100% confident that it will get merged first time as it's my first ever contribution.

[karptonite]

@brianfeister I'd just like to make a use case pitch for this feature being the correct behavior in some circumstances (and now there is an open merge request).

We have a form where users log information about when they played a board game. One of the fields is Location. We use UI-Select with tagging to allow users to either select a previous location (without having to start typing, as autocomplete would require). It "feels" like a text field, and the behavior should be, we think, that on blur it creates the new location locally. Nothing is saved to the server until the user submits the entire form, but with the current behavior of UI-Select, the user has to actually hit Enter to prevent a newly entered location from vanishing on blur.

[ivanmayes]

+1 Could really use this feature for inputs that we want to have suggestions for, but allow a user to write in their own value if the suggestions dont fit with the input

[alnimu]

Using mattmcardle code

 directive('tagOnBlur', function($timeout) {
        return {
            require: 'uiSelect',
            link: function(scope, elm, attrs, ctrl) {
                ctrl.searchInput.on('blur', function() {
                    if ((ctrl.items.length > 0 || ctrl.tagging.isActivated)) {
                        $timeout(function() {
                            ctrl.searchInput.triggerHandler('tagged');
                            var newItem = ctrl.search;
                            if ( ctrl.tagging.fct ) {
                                newItem = ctrl.tagging.fct( newItem );
                            }
                            if (newItem) ctrl.select(newItem, true);
                        });
                    }
                });
            }
        };
    })


<ui-select tag-on-blur ng-model="Assigner.selected.materialId"
                           tagging="addNew" tagging-label="false">
                    <ui-select-match placeholder="{{'semantic_categories.material_selector' | translate}}">
                        {{$select.selected.name}}
                    </ui-select-match>
                    <ui-select-choices repeat="item.id as item in lists.materials | filter: $select.search">
                        {{item.name}}
                    </ui-select-choices>
                </ui-select>

[chopachom]

This is indeed a very frustrating behaviour even I as programmer always forgot to press enter or tab when adding tags and I really can't agree that loosing entered data is correct behaviour. Blur is an explicit action: when I enter value and then click one the next field I expect my value to persist not vanish

[sintjuri]

Am I correct that the problem is not solved. Even workaround with tagOnBlur described above is not working perfect, because sometimes onClick of document works first and clears ctrl.search. Sometimes blur works first, in this case tag appears.