Control Dropdown Behavior on Tag and Input Box Clicks

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

https://yaireo.github.io/tagify/

Other

3.48k stars 429 forks source link

Control Dropdown Behavior on Tag and Input Box Clicks #1321

Closed yejune closed 4 months ago

yejune commented 4 months ago

Prerequisites

[x] I am running the latest version
[x] I checked the documentation and found no answer
[x] I checked to make sure that this issue has not already been filed

Demo Page - clone one of the below:

(https://github.com/yairEO/tagify/assets/3735511/4866698d-eefa-4662-b887-5dd4ee6926be)

I want clicking on a tag to have no effect, and the dropdown to only open when the input box is clicked.

Thanks.

yairEO commented 4 months ago

It is confusing to keep the dropdown shown while clicking on an existing tag to select it. The UX will imply that selecting anything from the suggestions dropdown will replace the selected (existing) tag.

I suggest clicking the tag should close the dropdown

yejune commented 4 months ago

However, if you click on another tag, a dropdown opens. I don't want the tag to be replaced. In this case, tag clicking and dropdown have nothing to do with each other. Clicking the first tag closes the dropdown, clicking the second tag opens the dropdown. This is not consistent behavior. I think closing is fine, but I would prefer that the dropdown does not open when the tag is clicked. The dropdown should only open when the input box is clicked I want to control the event of that action.