MultiSelect tagInputProps: How to avoid input focus when onRemove triggered?

[MichaelLonin]

Environment

• Package version(s): 2
• Browser and OS versions:

Question

Is it possible to prevent input focus when onRemove triggered? Thanks in advance!

[tnrich]

I think what MichaelLonin is maybe getting at here is that there seems to be no way currently to stop the select popover from opening when the tag X is clicked:

I definitely think that functionality should be optional. Unfortunately the onRemove handler signature looks like this:

handleTagRemove = (string, index) => {...}

So we can't manually stop event propagation/prevent default ourselves.

Thoughts @giladgray @adidahiya ?

[tsnevillecom]

Removing the tags should not open the popover. The intent is not to select new options when removing.

[grancalavera]

@adidahiya I can think of two ways of fixing this:

1. Always stopping the on click event propagation when a tag is removed
2. Passing the original click event as an extra argument to handleTagRemove and letting consumers stop propagation if required.

I'm more than happy to implement any of those solutions, or any other solution that you may suggest.

[grancalavera]

@adidahiya ok I implemented solution 1 since it's the most straight forward and doesn't require API changes. Please take a look and let me know if you want any changes.

[grancalavera]

Moving my comments from #4034 here, this might be the right place to continue the conversation

@adidahiya what about this?

Another approach would be to pass the event to consumers of TagInput

Something else we could try is handling the event propagation in MultiSelect, and assuming we can know the identity of the event target, ignore click events originating from removing a tag. Not sure if that's even possible, but I'm happy to explore that path.

What do you think?

[adidahiya]

@grancalavera I would still like to avoid "ignoring" clicks or stopping event propagation. Can you implement a new prop on TagInput which prevents the input from getting focus on tag remove (and enable that prop by default in MultiSelect)? I haven't looked into it deeply but there seems to be a fair amount of focus management in that component which could be tweaked.

[grancalavera]

Cool, I'll start looking into it.