Skip to content

'multiple' Dropdown Refreshing on First Selection or emptying selection of option in Dropdown #2817

@PMSD

Description

@PMSD

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

  1. create a select element with items
  2. call dropdown on the select
  3. select an item from the dropdown
  4. see in the element hierarchy that the dropdown refreshes and all of the items are refreshed

Expected result

  1. I would expect that the dropdown shouldn't totally refresh just because the class changed on the select element.

Actual result

  1. 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)

dropdown debug from 2.9.2
fomantic 3 refresh


dropdown debug from 2.8.8
fomantic no refresh

I believe this addition of attributes to the selectObserver.observe is the culprit
fomantic attribute line

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    type/bugAny issue which is a bug or PR which fixes a bug

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions