question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Weird IE Edge issue with onChange prop

See original GitHub issue

So today I discovered that ONLY on the Microsoft Edge, the multiselect’s onChange prop gets called before The parent model’s this.data has been set.

What should happen

this.searchParams Should be set as it is set via the data() call on the parent Vue

data () {
   return {
     searchParams: JSON.parse(JSON.stringify(window.vueData.searchParams))
  }
}
<multiselect :selected.sync="searchParams.tire_width"
                                             :options="options.dropdowns.tire_width.data"                              
                                             :on-change="setMultiselectValue"
                                ></multiselect>

setMultiselectValue is used with the onChange prop. Here is what I get when I console each value.

setMultiselectValue (newVal){
                console.log(this.searchParams); // My whole Search Params object. It has the right structure, but everything has an empty value.... This is not possible as i have not set it anywhere empty.
                console.log(vueData.searchParams); // This is the JSON that gets returned from my backend, and its all full with the data that it should be.
                console.log(newVal); // This is the EXACT value I am expecting, because it is the same as the one in vueData.searchParams. 

How on earth, can Multiselect return its new Value, which is passed by the Selected prop, WHICH is returned from the parent this.searchParams, but at the same time this.searchParams is empty…

I have no idea if I managed to explain this at all, I will happily do some sort of skype call or what ever, because this occurs ONLY on the Edge … Every other browser I could try works flawlessly … And it should…

I cant do a fiddle as this is tightly coupled with my project…

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
shentaocommented, Jul 27, 2016

Hmm, I could provide additional events like @close and @open that would return the current value of the multiselect. This would probably very useful when multiple: true as you wouldn’t need to listen to the @update event anymore, but to the @close one. The only drawback being – one would first have to close the dropdown to trigger updates.

With the @open event it would be possible to make better validations, as this would be basically a signal that the dropdown was touched.

Would that be fine?

0reactions
shentaocommented, Jul 28, 2016

I believe I’ve tried it, but it has been looking for the native change event, which it, of course, couldn’t find. But I will try it again, to make sure if that was true.

Read more comments on GitHub >

github_iconTop Results From Across the Web

onchange event is not firing on IE - MSDN
You're misinterpreting what the onchange event does when applied to a textbox. It won't fire until it loses focus or you hit enter....
Read more >
Why does Edge mask the onchange event handler when an ...
I try to test your sample code with MS Edge, Chrome and Firefox browser and I am able to produce the issue with...
Read more >
OnChange randomly misses keys on IE if typing very quickly
It looks to me like IE11 is setting the value as soon as the user types a keystroke, and enqueuing the event handler....
Read more >
126379 - Select (size=1) onChange not called using down ...
This bug has been marked "wontfix" because the w3c recommendation says the onChange event should only happen when the control loses focus. However,...
Read more >
Introduction to browser events - The Modern JavaScript Tutorial
ONCLICK , because DOM properties are case-sensitive. addEventListener. The fundamental problem of the aforementioned ways to assign handlers is ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found