What is the expected behavior?
In select mode, I want to provide the ability to edit (so I set userInput to true) but also not show the delete button and so set 'tagX' class to blank. Now, whenever the dropdown is open and clicking anywhere outside should close the dropdown.
What is happening instead?
The dropdown is not getting closed.
What error message are you getting?
No error messages. If I don't blank out the tagX class then everything works fine. I noticed that when the tagX class is not set, clicking the dropdown icon opens the dropdown and the focus immediately goes to the selected tag. This seems to prevent the closing of the dropdown when clicking outside. If tagX class is left as is, then the selected tag is not focused on opening the dropdown and everything seems to be working fine.
Prerequisites
💥 Demo Page
https://jsbin.com/yipohapina/1/edit?html,js,console,output
Explanation
What is the expected behavior? In
selectmode, I want to provide the ability to edit (so I set userInput to true) but also not show the delete button and so set 'tagX' class to blank. Now, whenever the dropdown is open and clicking anywhere outside should close the dropdown.What is happening instead? The dropdown is not getting closed.
What error message are you getting? No error messages. If I don't blank out the tagX class then everything works fine. I noticed that when the tagX class is not set, clicking the dropdown icon opens the dropdown and the focus immediately goes to the selected tag. This seems to prevent the closing of the dropdown when clicking outside. If tagX class is left as is, then the selected tag is not focused on opening the dropdown and everything seems to be working fine.