Tagging support (continues #260)

[brianfeister]

@dimirc I've rebased the latest from @tvervest and @juanpasolano from #260. I've also added auto-tokenization support at your request, and custom labeling (with optional no-label) for new tags. Note that javascript ignores trailing / leading whitespace characters inside data attributes so users will need to use the constant / literal SPACE if they want tagging with that character. You can pass in pipes (so the only invalid character for tagging is |) to get multiple tag characters. This can be seen in the tagging demo I've created in my fork here.

Usage

1. tagging - this attribute accepts an optional string which is a scope function. That function will be passed a string from the select input and return the transformed result will be injected into ctrl.items (available for selection). e.g. <ui-select multiple tagging="tagTransform">
2. taggingTokens - accepts a string that will be listened for in keyup, this keyboard character auto-tokenizes the current value and selects it. Multiple tokens are supported by separating characters with |'s. SPACE is a special case since whitespace characters are ignored in input fields by jQuery, as a result, tagging-tokens=" " fails to eval to whitespace, so the special key value SPACE is used instead. e.g <ui-select multiple tagging tagging-tokens="SPACE|,|/"> would listen for space, comma, and forward slash.
3. taggingLabel - (false|string) accepts an optional string for the label appended to tags in the dropdown (defaults to (new) if empty or undeclared. If the string false is declared it will omit the injected helper ({string} (new)) value from the dropdown and tagging will trigger via tokenization shortcuts or ENTER key.

[brianfeister]

@dimirc is there a problem with the Gulp build? When I make changes to /src/select.js with gulp watch in the background, it rebuilds /dist/select.js and injects the templates but omits the contents of /src/select.js. Any ideas?

[brianfeister]

Apologies, I'm good now - it was failing jshint and I didn't notice. All good now, think the next build should pass.

[brianfeister]

@dimirc, would love some review on this. The addition of a (new) tag appearing in the dropdown was far from trivial but I have it (as well as the option to omit) in there.

Usage

1. tagging - this attribute accepts an optional string which is a scope function. That function will be passed a string from the select input and return the transformed result will be injected into ctrl.items (available for selection). e.g. <ui-select multiple tagging="tagTransform">
2. taggingTokens - accepts a string that will be listened for in keyup, this keyboard character auto-tokenizes the current value and selects it. Multiple tokens are supported by separating characters with |'s. SPACE is a special case since whitespace characters are ignored in input fields by jQuery, as a result, tagging-tokens=" " fails to eval to whitespace, so the special key value SPACE is used instead. e.g <ui-select multiple tagging tagging-tokens="SPACE|,|/"> would listen for space, comma, and forward slash.
3. taggingLabel - (false|string) accepts an optional string for the label appended to tags in the dropdown (defaults to (new) if empty or undeclared. If the string false is declared it will omit the injected helper ({string} (new)) value from the dropdown and tagging will trigger via tokenization shortcuts or ENTER key.

[brianfeister]

Whitespace free diff here: https://github.com/angular-ui/ui-select/pull/327/files?w=1

[pderksen]

This is awesome! Been waiting for this for a while (see #226).

Thanks for all your hard work getting this done so we can finally migrate from ui-select2.

[amcdnl]

Can you give me a demo and a short doc on how to use this?

[brianfeister]

@amcdnl demo is already in there: https://github.com/angular-ui/ui-select/blob/master/examples/demo-tagging.html. As for docs, I just updated the wiki: https://github.com/angular-ui/ui-select/wiki/ui-select

[brianfeister]

@ProLoser was it correct to remove the /dist files? I'm thinking they're necessary, but @dimirc had requested. Now that it's merged I'm pretty sure that's going to break bower installs, no?

[ProLoser]

@brianfeister I'm not really am active maintainer so I'm extending an invite to you.

I think @dimirc wants to follow the convention of generating the dist files in their own respective commit that would then be tagged vs regenerating them with every patch. You probably should not have touched the dist files in any way.

I have no opinion on best practice but perhaps you can regenerate them on a new tagged commit

[brianfeister]

Great thanks for the access, appreciate the vote of confidence. I pushed out a release tag and an associated commit: https://github.com/angular-ui/ui-select/releases/tag/v0.8.4

[amcdnl]

@ProLoser @brianfeister ya he requested me to remove dist files so those can be generated on release to avoid merge collisions.

[ProLoser]

@amcdnl @brianfeister I don't think you're supposed to delete and add dist files all the time. Just leave them untouched in patches and only modify them in their own dedicated release commits.

[brianfeister]

@ProLoser, yeah that was already my understanding. It's just that I misunderstood @dimirc's request and then it got merged with the files removed rather than just having their changes uncommitted.

[dimirc]

@brianfeister to keep it consistent, I created release v0.9.0

[brianfeister]

@maxcook - what would make you think that this comment

How could you not see that coming?

would further the cause of making the world a better place? The answer to your question is that you're asking the wrong question. I didn't write the line of code that you're referencing (also you did not correctly use Github markdown and you didn't give a line number reference, so you should probably do that). The code came from an upstream merge of another developers feature and it merged fluidly via Git so I never had the chance to look at that particular state of the directive. So, let's work together and fix it now. Please post a Plnkr.co / jsfiddle.net demo that reproduces the error and we'll get it fixed. Also you should probably open this as an issue rather than piggybacking on a closed merge request.

Your other questions:

1. "Also it would be awesome to empty the input field after adding a tag (so i do not need to delete the contents myself before adding the next tag)." I've already written the code to empty the input field after adding a tag, hopefully your problem is related to the above issue, that arose from a bad merge.
2. "DEL key does not delete the contents of that input field". Again, the delete key was working fine in my tests, please post a plnkr / fiddle / etc. (in a new bug report, feel free to @ mention me) that demonstrates the problem.

[santialbo]

I would like to thank @brianfeister for the great work on this PR. It works like a charm!

[ceesvanegmond]

I've applied the newest version of ui-select and enabled tagging.
It works, however I do see another problem/error.

When really quickly adding items by typing enter, typing enter, typing enter (really quickly), I do get an error. Any idea how to solve this? Do other people have the same problem?

[brianchance]

@brianfeister - big thanks for your work, really needed this.

@maxcook - I think you can auto clear the text using resetSearchInput attribute on the ui-select element(reset-search-input="true"). You can also set it globally using config:

app.run(['uiSelectConfig', function(uiSelectConfig) {
        uiSelectConfig.resetSearchInput = true;
    }
]);

[brianfeister]

Thanks for the support everyone, appreciate that.

@ceesvanegmond - can you try this for me and see if it fixes the issue:

https://gist.githubusercontent.com/brianfeister/0c9bffea7ca0b2988dcb/raw/333b70393bb74a500db410da7d43de1e68621607/select.js

If not, please give me a demo of the bug.

[parliament718]

@ceesvanegmond @brianfeister
I was getting the 3rd error I'm seeing in your screenshot (uiSelectChoiceDisabled)

This is due to line 626: ctrl.select(null, true); passing null at first paramters and then later checking if (item === undefined || !item._uiSelectChoiceDisabled) { ... }

Cannot read _uiSelectChoiceDisabled of null makes sense.
The easiest fix for me was to pass undefined instead:

ctrl.select(undefined, true);

note: fixing this also got reset-search-input working correctly again, which was not resetting due to the exception.

[darrudi]

Feature Request:
The user may enter a string which is considered invalid by the tagging function. So the tagging function should be able to return null upon receiving the input. I did this but a bunch of errors surfaced. My tagging function:

    $scope.uiSelectNewTag = function(email){
        email = email.trim();

        if (email.match(/^[a-z][a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i)) {
            var newItem = {
                type: 2,
                email: email,
                key: email
            };

            return newItem;

        } else {

            return null;

        }
    };

Also the user may copy-paste a string (e.g. a list of emails separated by semicolons) into the ui-select and the tagging function may decide there are more than one item in the input. So I guess its a good idea to have the tagging function return an array (zero or more items) instead of a string.

[brianfeister]

@darrudi - please open a separate issue for this so that your request doesn't get lost.

[darrudi]

@brianfeister - done: #485

[windmaomao]

thank you @brianfeister. I just run the example, exactly what i wanted, so now i just need to learn how to use it. Thanks all for the hard work.

[pruchai]

Is there any way to disable new tag creation? I want users to only be able to pick tags available in the drop down menu.

EDIT: Never mind. I just disabled tagging and left multiple

[brianfeister]

;)

[darrudi]

@pruchai: Take a glance at examples. All this thread is/was about adding free tag support. :)

[trickpattyFH20]

Great feature to add tagging but I was really hoping this would work for just a regular select dropdown not just the "multiple" select. I have a single select and I'd like it if a user could add options to this list. I tried using tagging on a single select in the demo code and in my own code and it doesn't seem to work.

Do you have plans to implement this for the regular select dropdowns? @brianfeister

or does anybody else have a workaround to implement tagging for single select dropdowns?

[pwchan]

+1

[GFoley83]

@ceesvanegmond @brianfeister @parliament718
As of version: 0.9.6, with tagging enabled, I'm still getting
Cannot read _uiSelectChoiceDisabled of null.

Updating the following line:
https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L675 to
ctrl.select( newItem || undefined, true);
solved it for me. In other words, passing undefined instead of null, as @parliament718 mentioned.