first component trigger second

[cberenguer]

I have 2 tagify component in the same modal, but when I select a tag in the first component this trigger the dropdown of the second, I already check that the name of the classes are different to render the components, I need help with this, thanks

[yairEO]

Please follow the issue template instructions and create a minimal jsbin which reproduce the scenario

[Reikooters]

I encountered this as well. Here is more information using the issue template.

Prerequisites

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

💥 Demo Page

https://jsbin.com/sogukulavo/edit?html,js,output

Explanation

• What is the expected behavior?

  • When using dropdown: { closeOnSelect: false }
  • Two tagify components on the page - with one directly below the other, positioned in a way that the dropdown list of the top one would cover the bottom one

Clicking on an item in the dropdown whitelist in the top component should not cause the bottom component to catch the click, become focused and open the bottom dropdown.

• What is happening instead?

If you click on an item on the top component's dropdown list, and the mouse's position is over the bottom tagify component, the bottom component is being focused on the same click as clicking on an item in the top dropdown list.

Additionally:

• The bottom component's dropdown is opened because it had focus.
• The dropdown list for the bottom tagify component remains open until you click in/click out of the bottom tagify component, even after you click on other elements on the page.
• The width of the top dropdown list which is kept open showing remaining items does not resize (get wider), probably because the bottom tagify took focus.
• The issue does not occur when using dropdown: { closeOnSelect: true }

See demo jsbin link above. And here's a video:

tagify.2.mp4

• What error message are you getting?

No error messages

[yairEO]

Thank you @Reikooters for being clear with the problem

[yairEO]

seems to be fixed. Related to #1064

[Reikooters]

Hi @yairEO - Thanks for having a look at it. I've just tried this in the updated version 4.14.0. It seems the problem is still occurring as per my previous description.

https://jsbin.com/vuqeyaropa/edit?html,js,output

[yairEO]

Ho, no problem, I will solve it once and for all today

[Reikooters]

Hi @yairEO - thanks for having another look at it.
Is there anything we should do different now with the configuration to make this work?

I tried again with the same jsbin link above without any changes, but now I'm not able to select any items from the dropdown whitelist.

When clicking on an item in the dropdown list, the dropdown stays open and doesn't get added into the list of selected tags. Also clicking elsewhere on the page keeps the dropdown open as well, unless you click into the input box and then out of it again.

[yairEO]

Hi, I am investigating