Tagging support

[tvervest]

As discussed earlier, I've re-applied the changed needed for tagging support on the latest master.

Note: my work is based on a fork of @juanpasolano's fork, so it also includes his patches in #198

[brianfeister]

There are a number of similar commits for tagging support ... and I don't see any comments from the repo maintainer. Will any be merged? #226, #198, #260

[sfrenot]

👍

[mrdevin]

👍

[JohnMorales]

👍

[brianfeister]

@dimirc get we help test this out or do anything? I'm blocked by lack of this feature. Also @tvervest Do you need to rebase? Current master is 0.8.1 and your code shows 0.7.0.

[brianfeister]

@tvervest I'm looking at the source and it looks like passing a "transform" function for incoming tags should be something like

<ui-select data-multiple data-tagging="addTag($item, $model)">

But this isn't working for me... what am I missing?

[brianfeister]

Ah, it only accepts a string as an argument and can't pass any arguments beyond the new strings value. That's fine, so it should be

<ui-select data-multiple data-tagging="addTag">

[dimirc]

@tvervest can you rebase and remove /dist files to review it asap?

@brianfeister honestly I haven't check yet any of the PRs related to tagging support. So if you can start checking the different proposals and give some feedback on the different approaches, that will help to move faster.

Maybe we could have this feature finish by weekend, but I need help for checking the alternatives, testing and documenting with some demo.

[brianfeister]

Thanks @dimirc I can help out with the docs and examples. I recommend this PR from @tvervest, he wisely added the ability to pass a data-tagging function parameter which is executed as a transform on all incoming items before they get added. One small thing is my PR here: tvervest#1 ... I'm using this on a large company project and there is significant complexity so I ran into a case where all items in the dropdown were highlighted, the code in my PR fixes that issue.

Should I move forward with sending PR's to @tvervest's (re: docs / examples) and assume this PR will be the merged one?

[dimirc]

Maybe we should stick to use a similar style of tagging that select2 uses. Adding the dynamic new value as part of the choices dropdown:

[brianfeister]

Actually I hate that about select2 myself. My vote would be "no" on that.

Sent from my iPhone

On Oct 9, 2014, at 11:08 PM, Wladimir Coka [email protected] wrote:

Maybe we should stick to use a similar style of tagging that select2 uses. Adding the dynamic new value as part of the choices dropdown:

�
Reply to this email directly or view it on GitHub.

[dimirc]

We could try checking the return value of the factoryFn and if its false we could prevent the creation of the item.

[dimirc]

@brianfeister even if we don't follow same style of select2, maybe we should give some feedback to the user so that they know that they can create this dynamic values.

If we don't give some feedback, the only way the user will know that tagging is enable will be if they write on search input, press ENTER and then checking if the tag creates or not.

[dimirc]

What do you think about implementing Auto Tokenization, so that we can specify the characters that will force the creation of a new choice. Could be something like tagging-tokens:

  <ui-select multiple tagging='true' tagging-tokens=', ' ng-model="multipleDemo.colors">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

In the previous example the comman "," and an empty space " " will force the creation of a new choice

Related to #180

[brianfeister]

Yeah I have an edge case, where I am using it to mimic a "free text" search that has facets / filters. So I'm intentionally hiding the tags in the input field and doing magic with them elsewhere. You can ignore my take on it and just go with the foobar (new) option I think. Maybe give it a CSS class so that it could be visually hidden without difficulty. Also I agree about tokenization, that would be a great feature.

[masscrx]

Hi, Can you provide some info how to use this taggin option? I had made some workaround with similar functionality before I've found this conversation, almost everything works, so after user write some string, my solution check if it exist in db and then change background for and show button, but when user leaves input - entered string is cleared so I can save my string to db when I'm in ui-select input but can't change to another input for additional editing and this is the only problem, my gist : https://gist.github.com/masscrx/d7fa6ccf4495d5e9695e and short movie: http://youtu.be/wOfG2-30v-w

UPDATE: I've changed a bit ctrl.close function and now all is working properly, I'm not an expert but it fills my requirements: masscrx@98229e9

[brianfeister]

@dimirc - do you want me to open a new pull request for this? I haven't heard from @tvervest (I'm sure he's busy like all of us), so I don't want to steal his spotlight in finishing this out. I'm going to spend a while on this today as part of my day job since it's required for the product I'm building.

[brianfeister]

@masscrx - your code breaks a number of the core functionalities of ui-select for me, I tested it out in my solution and I was not able to select anything in the dropdown (the input value would remain unchanged), keyboard ENTER does not select the active item, and a few others. Can you create a working Plunkr or fiddle of your code and show what problem it's attempting to solve? We will need to understand what it's trying to do in order to include the functionality (if it's something that will be useful to a majority of developers)

[dimirc]

@brianfeister yes, a new PR might will help us move faster and resolve this hopefully very soon

[brianfeister]

@dimirc , will do. Thanks for following up, will link to this PR when I have code for review.

[masscrx]

@brianfeister I know that my code breaks core functionality but as I said I'm a begginer with JavaScript and AngularJS so I've made changes on select.js which can show what functionality I need, plunkr: http://plnkr.co/edit/LT0oR2VIhRijr5G7bHca?p=preview so use case:

1.User click on input
-- dropdown is rolling down

2.User writes something which is not in the dropdown collection (ex."coding")
--now div is changing a color and button is showed, so user can directly save new item (when you click 'save item' on console will be string from input)

So this is simple functionality to "create tag", I tested your changes and I don't know how to add new tag ?

[brianfeister]

@masscrx this feature is being moved to #327 and is not yet finished. Once it is, documentation on how to use the feature will appear there.