Enable TagPicker to insert new tags

[leoseccia]

We should have a simple way to add new tags when using the TagPicker... PeoplePicker allows inserting of people not in the list. TagPicker should allow the same.

Also, we need an example in the documentation that shows how this is done.

For reference: #1001 and https://stackoverflow.com/questions/50451984/office-ui-fabric-react-tagpicker-new-item

What component or utility would this be added to
TagPicker

[jdhuntington]

@leoseccia This is a good idea - I will make sure this gets added to the roadmap for the TagPicker.

In the meantime, I made an example at https://codepen.io/jdh-msft/pen/xNwJVO?editors=0010 that shows what you can achieve with the existing API. We would like to provide a better API for this in the long-term, but this might help unblock you today. Happy to answer any questions about it as well.

[leoseccia]

@jdhuntington - thank you for the example it really helps...

[leoseccia]

@jdhuntington - I have forked and changed the codepen as I was getting some exceptions and usability issues with the one you provided: https://codepen.io/leoseccia/pen/XwXYMP?editors=0011

[jdhuntington]

@leoseccia Sorry to hear that - that codepen example works well for me though. In what cases is it throwing exceptions?

[leoseccia]

@jdhuntington - no worries. I found 2 issues with it...

1- when you type a value that is already in the tag list in its entirety - https://www.screencast.com/t/wKrawSRpKh2

2- not a bug but not right for my usecase, when you partially type something and hit Enter, the first item from the list of existing items get selected... I want the typed word to be added to the tag list - https://www.screencast.com/t/jZJllhD0heqb

My fork deals with both of these... Thanks again for all your help.

[leoseccia]

@jdhuntington - I am trying to limit input for this control as I want to avoid users adding tags in the incorrect format - for example: only allow lowercase letters and dash (no spaces or numbers)... Ideally this could be done with a pattern attribute ie. pattern="[a-z\-]" but as this is not implemented, do you know of a way I can do this using the current implementation of the control?

[leoseccia]

@jdhuntington - I am trying to limit input for this control as I want to avoid users adding tags in the incorrect format - for example: only allow lowercase letters and dash (no spaces or numbers)... Ideally this could be done with a pattern attribute ie. pattern="[a-z\-]" but as this is not implemented, do you know of a way I can do this using the current implementation of the control?

I found a way to do this... https://stackoverflow.com/questions/56464099/filter-out-and-lower-case-all-characters-using-onkeydown-ev-react-keyboardeven/56480158#56480158

[AndrewCraswell]

Out of curiosity, is there a way to just render a Tag component outside of the TagPicker? I don't see any documentation on the Tag component, and a quick try had it rendering incorrectly...

[HarryGifford]

@jdhuntington Not sure if it's relevant, but Azure DevOps have a picker that allow you to add arbitrary tags. It looks like they have implemented their own control for it though:

You can see it if you create a bug or pull request.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.