Selectr icon indicating copy to clipboard operation
Selectr copied to clipboard

Clear fires multiple change events

Open boyanyordanov opened this issue 5 years ago • 2 comments

Hello and thanks for your work on the library!

I am not sure if this is a bug or the desired behavior but I can't make it work for my use case.

I am using the multi select variant and want to trigger an Ajax request after an option is selected or deselected. I also want to keep 'clear all' option, which should also send a request.

I have and event handler for `selectr.change' which works fine when I select individual options.

However when I clear the select it fires a change/deselect event for each selected option and I end up with a bunch of requests when I only need to make one.

I'll be happy to work on PR if you think that this can be added. :)

boyanyordanov avatar Feb 06 '19 15:02 boyanyordanov

the clear() calls the deselect() on all selected items, the deselect triggers multiple events

this.emit("selectr.change", null);
this.emit("selectr.deselect", option);
            
        // fire native change event
        if ("createEvent" in document) {
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("change", true, true);
            this.el.dispatchEvent(evt);
        } else {
            this.el.fireEvent("onchange");
        }

When you have multiple selected values, each of these selected values will trigger a change, deselect and a native change event.

Perhaps the deselect() function should be able to receive an array, so it can deselect all those in the given array and emit all current events onle once.

The clear() function can call the deselect() with an array and thus prevent all the events to be triggered

reno1979 avatar Mar 08 '19 20:03 reno1979

That's a good option indeed. Or it could have an option to bypass emitting events altogether which clear can use.

boyanyordanov avatar Mar 09 '19 10:03 boyanyordanov