[Dropdown] 'clearable' setting - clears all the values across a class of dropdowns

[cwalor]

I use a lot of dropdown classes and stub the items list in Javascript. Allows me to mgt one listing that affects many similar dropdowns across my website. ie. list of states for example. The new 'clearable' setting is really nice because it allows me to clean up the interface and drop the -select- as a first line item etc. Unfortunately, clicking the 'clear' icon deletes values across the whole class of dropdowns. Hoping this feature could be initialized by class but the 'clearable' click be tied to an individual element/id. Thank you.

[ColinFrick]

Can you create a JSFiddle to replicate the issue?

[cwalor]

https://jsfiddle.net/ca0rovs3/1191/#&togetherjs=9vdj8H0MkJ

Ok. fiddle created. Never done this before so hope you can see it.

In creating the fiddle I discovered some additional insight. It seems that enabling the 'on:hover' setting when initializing the dropdown is the root to the issue. My site has lots of data entry so saving a user an extra click to open up a dropdown is a big deal. The minimized code I created for the fiddle reacted differently than in my website which got me into looking into why. It seems that if the dropdown is wrapped in a Semantic UI form class (i.e ui form) the whole form is cleared when clicking on any one of the dropdown 'clear' icons. If the .ui.form class is removed then a click doesn't have any affect on the target dropdown (an obviously none of the other fields are affected either).

The fiddle i created was the worse case scenario where clearing a target dropdown clears out all the fields in the form.

Hope this helps. Thanks.

Btw, tested both scenarios without the 'hover on' enabled and both senarios worked as expected.

[cwalor]

Colin, I created the fiddle yesterday. I am assuming you automatically get notified. But just in case you don’t, I wanted to give you a heads up.

…

On Oct 11, 2018, at 11:39 PM, Colin Frick ***@***.***> wrote: Can you create a JSFiddle <https://jsfiddle.net/ca0rovs3/>to replicate the issue? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6617 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATulksAs0w3eupvQ9-t1TjO_2mYpaydAks5ukB0cgaJpZM4XYngx>.

[ColinFrick]

@cwalor I have and just looked into it. The problem is connected to #6594
In case of on: 'hover' there is no click listener attached to the clear icon, as a result the click event bubbles to the form, and the form listens on click events on any elements with the clear class therefore clears the form.

[cwalor]

My bad for submitting a dup. Hopefully there was some value in what I submitted. Thanks for such a quick response. Btw, I love this framework.

…

On Oct 13, 2018, at 1:22 PM, Colin Frick ***@***.***> wrote: @cwalor <https://github.com/cwalor> I have and just looked into it. The problem is connected to #6594 <#6594> In case of on: 'hover' there is no click listener attached to the clear icon, as a result the click event bubbles to the form, and the form listens on click events on any elements with the clear class therefore clears the form. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6617 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATulkjd1-RUPP9wjOARd8WxJ3D6nyJr2ks5uki9kgaJpZM4XYngx>.