Dropdown repeatly shows options under label element

[MohanVijayakumar]

when the dropdwon placed inside label (inline) element , the dropdown options shows repeatedly

http://jsfiddle.net/cdr0hvhz/1/

I've just been looking into this as it was reported to me for my DataTables integration with Semantic UI as well.

I think a small modification to @MohanVijayakumar's Fiddle shows the issue: http://jsfiddle.net/cdr0hvhz/3/ . Basically what is happening is that a click on the text in the label is triggering the click event on the label dropping the code into eventInModule. So eventInModule is actually called twice while the Semantic UI menu is open - the click on the div of options and another (the issue) on the select element coming from the text.

So the listener for the label needs to detect if the dropdown is shown or not before doing anything.

Removing .on('click' + eventNamespace, selector.item, module.event.item.click) appears to address the issue and I don't see any side-effects, but I doubt that is the answer - it doesn't feel right!

[jlukic]

I'll try to take a look at this when i get a chance.

[vincent-olivert-riera]

I was experiencing this issue and I didn't know it was already reported. Thanks @jlukic to look into it, I hope you fix it soon.

[MohanVijayakumar]

I got the same problem when using datatable.
here is the temp solution which is i used for this issue.
find the lable element and get the child content of that and replace the label element with div element add the contents under div element

var dt_lengthParent = $('[name="id_tbl_assignedmaterialitems_length"]').closest('label'); var dt_pagelengthHolder = dt_lengthParent.contents(); dt_lengthParent.replaceWith( '<div id="id_tbl_assignedmaterialitems_length_con_div"></div>'); $('#id_tbl_assignedmaterialitems_length_con_div').append(dt_pagelengthHolder);

[jlukic]

It's simple enough to fix this by adding

  $('label')
    .on('click', function(event){
      event.preventDefault();
    })
  ;

[jlukic]

I've added a solve for determining if the event comes from a label click event on a surrounding label. This should prevent anyone having to add additional code outside of init like mentioned above.

Keep in mind the third example, label clicks should still trigger show correctly when not from a surrounding label.

Example from next
http://jsfiddle.net/La0sdpqd/

Awesome! Thank you very much :-)