-
-
Notifications
You must be signed in to change notification settings - Fork 335
'multiple' Dropdown Refreshing on First Selection or emptying selection of option in Dropdown #2817
Description
Bug Report
While making use of multiselect dropdowns created from a select element I noticed that upon the first selection of an item, the entire dropdown and all of its items were refreshing. I noticed this because I was making use of the parentNode of the item selected in an event listener and when I recently updated fomantic, the event listener broke.
So I did some digging. I set my dropdown config debug and verbose to true and I ran the older version fomantic and compared it to the newer. I found that in the new version, the dropdown was refreshing 3 times, where as in the old it wasn't refreshing at all. I went digging through the code and I believe it has to do with the selectObserver in dropdown.js
What I found was that attributes were added to a select mutation observer. Now whenever an attribute changes on the underlying select element, the whole dropdown is refreshed.
So for instance, whenever the class of the select is changed from "noselection" to empty or vice versa it refreshes the whole dropdown.
As in my case, where I...
1.) select one element
2.) the select goes from "noselection" to empty class
3.) the dropdown is refreshed over and over
4.) poor little item is orphaned
5.) my evenListener sees null for parentNode
I have a feeling this isn't desired behavior and may be causing other problems with 'multiple' dropdowns; but, I'm not familiar enough with the code base to say.
Steps to reproduce
- create a select element with items
- call dropdown on the select
- select an item from the dropdown
- see in the element hierarchy that the dropdown refreshes and all of the items are refreshed
Expected result
- I would expect that the dropdown shouldn't totally refresh just because the class changed on the select element.
Actual result
- The dropdown is refreshed 3 times when the select element's class changes
Testcase
//THIS TEST IS WITH 2.9.2
https://jsfiddle.net/wga63zv9/
//THIS TEST IS WITH 2.8.8
https://jsfiddle.net/f46roL25/
Screenshot (if possible)
I believe this addition of attributes to the selectObserver.observe is the culprit
Version
2.9.2
I'm wondering if the intent was to catch changes to underlying option's attributes; but, this unintentionally is catching attribute changes to the select?
Again, I'm not super familiar with the code base and maybe this is desirable behavior... if so, I'm sorry if I've wasted anyone's time.