[Firefox Bug] Data binding with HTML <select> component cause selected option rendering wrong

[fxu12]

Hey guys,

I'm experiencing a wired data binding bug only happened in Firefox. I bind properties of <option> tag with an Ember computed property, but when the computed value is updated and the selected index of <option> is an even number, the displayed value of dropdown would always be the first value of <option> instead of the actual selected value.

I also tried in vanilla JS and it works just fine. Can someone help me take a look?

Thanks in advance!

Reproduce(Please open in Firefox):
Ember twiddle:
https://ember-twiddle.com/b6e09c3df2be9b21f41ecf8e8d28a91a?openFiles=templates.application.hbs%2C
Vanilla JSbin
https://jsbin.com/bigahec/edit?html,js,console,output

[nightire]

forgive me to off the topic, but this issue is really really interesting:

😹

[Serabe]

I can confirm the bug. It only happens with the even positions though. Trying to debug but Firefox Dev Tools are really crappy :$

[Serabe]

I made it happened for the odd now. Will continue tomorrow.

[krisselden]

FireFox needs to use the selected property for appending child options. The attribute doesn't seem to work.

via attribute
https://jsfiddle.net/9ajmscLc/
via prop
https://jsfiddle.net/tdanmpbt/

[piotrpalek]

Hey I just encountered this issue, it's the same as: https://stackoverflow.com/questions/4831848/firefox-ignores-option-selected-selected as far as I understand? Any fixes (or workarounds) for it yet?

[esbanarango]

I just tested this again on Firefox Developer edition 63.0b7 and Ember 3.2 and this still an issue.

[pixelhandler]

Forked the original twiddle to use the release version, https://ember-twiddle.com/23acf17e079f2f2ca3167e4109edcd56?openFiles=templates.application.hbs%2C

[locks]

Updated Twiddle: https://ember-twiddle.com/351fbdc7f3e2ec537ab20e006193c714

[locks]

Still happening with 3.17.

[rwjblue]

This does not seem like an Ember bug to me, it seems like an issue with FireFox (as mentioned by @krisselden in #15484 (comment)).

In recent versions of Ember you can use ember-prop-modifier to force Ember to use the selected property for the <option> which seems to work around the issue nicely.

See this demo (note: I've had to recreate the prop helper to avoid needing the addon in a twiddle): https://ember-twiddle.com/3c026ef89e221527104ad73e45adb444?openFiles=templates.application.hbs%2C.

[rwjblue]

Closing based on the last comment: 1) there is a pretty decent work around and 2) there really isn't anything Ember can do to fix this FireFox bug

[EvgenyOrekhov]

@rwjblue

1. ember-prop-modifier does for me nothing more than make the bug be reproducible in Chrome also.
2. How come other frameworks don't have that problem? Vue <select> example, React <select> example. Are they superior?

[czosel]

In case anyone is still running into this - here is the link to the firefox issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1300405
The issue has been fixed in Firefox v111, which is about to be released 🎉