Tags input cell

[abeall]

How can I implement a tag input cell type? Something like: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ (I am not saying I need to use this library, it’s just an example of tags input.)

I know it’s possible to create custom renderers and editors, but I couldn’t find any example close to the tags input kind of cell and there’s a lot of details here.

Making a renderer that renders the tags is easy. How to make the editor is a lot trickier.

Perhaps I can extend the AutocompleteEditor? I would need it to auto-complete for a new tag value, instead of the entire tags list (ex if a cell has “red,green” and I type “or” I expect to see a suggestion for “orange”, not “red,green,orange”). I would also need to override handling for backspace.

Do I need to create an editor from scratch? This way I could use a library like bootstap-tagsinput, but it seems that even for a simple text editor there is a lot of handling, I am not sure how much of that I’d have to re-create.

Any tips or examples?

[piotr.nowak]

Hi @abeall

If you want to close ‘x’ each tag just like in the bootstrap example you need to extend your renderer about some html to render a button for each tag. I’m not sure what this delete action could do in your example.

Get to the point. I agree with you. You have to extend autocompleteEditor if you want to your editor behave as you said.
And yes, it needs a lot of work to achieve your goal. Almost all our editor methods you have to re-write.

Unfortunately, we don’t have any example. But you could rely on our documentation. Here is a link to our tutorial on how to create editor from scratch - https://handsontable.com/docs/7.4.2/tutorial-cell-editor.html#page-creating-custom-editor

[abeall]

Thanks @piotr.nowak. I was able to get pretty close to what I want by extending AutocompleteEditor (the docs and source code really helped): https://jsfiddle.net/60hwq3j9/1/

There’s still some kinks to work out (and I haven’t tested this in our actual app yet):

• If you press backspace on a cell before any editor was ever shown it does nothing. After an editor was shown (on any cell) then backspace works to clear a cell.
• When I click the x button in edit mode it closes the editor, I’d prefer it kept it open. Maybe I need to modify an internal value rather than set the source data? But this may conflict with the auto-complete’s input data…
• When the editor is open I can click inside the tag list other than the x buttons and focus is removed from the input area, I would prefer if focus was trapped in the input while the editor is open.
• The strict parameter doesn’t work, it will accept any new value.

Any thoughts are welcome.

[piotr.nowak]

Good work @abeall

What type of action do you want to achieve after press backspace?

When it comes to the second point - you could add in open method local hook - e.g. this.addHook('beforeChange', (changes, source) => this.onBeforeChange(changes, source)); and inside this hook checking the difference between old value and new value. And if old is longer than new you don’t have to close the editor.
But how to force not closing the editor in this situation, this is a question

I think the editor still focus even if you click in remove button.

It needs to further investigation why strict doesn’t work.

[piotr.nowak]

Hi @abeall

As it is almost 3 weeks since we have spoken I will close the topic.
However, feel free to open a new or follow-up ticket when needed.