Issue of vdom(?) in Firefox for <select> tags

[rrahir]

We have found a peculiar behaviour that only occurs on firefox (AFAIK) with select fields, You can find a dummy example for the sandbox below.

CODE:

const { Component, useState, mount } = owl;

class Selector extends Component {
    constructor() {
        super(...arguments);
    }
    toggle(ev) {
        this.trigger("to-test", { value: ev.target.value });
    }
    willUpdateProps(nextProps) {
        console.log(nextProps);
    }
}

// Main root component
class App extends Component {
    constructor() {
        super(...arguments);
        this.state = useState({ name: ""});
    }

    fromTest(ev){
        this.state.name = ev.detail.value
    }

}
App.components = { Selector };

// Application setup
mount(App, { target: document.body });

<templates>
  <div t-name="Selector" class="selector" >
    <select class="target" t-on-change="toggle">
      <option value="empty"/>
      <t t-foreach="['tabouret', 'jambon']" t-as="val" >
        <option t-if="props.val === val" selected="1" t-att-value="val">
            <t t-esc="val"/>
        </option>
        <option t-else="" t-att-value="val">
            <t t-esc="val"/>
        </option>
      </t>
    </select>
  </div>

  <div t-name="App" class="test" >
    <Selector val="state.name" t-on-to-test="fromTest"/>
  </div>
</templates>

.selector {
    font-size: 20px;
    width: 300px;
    height: 100px;
    margin: 5px;
    text-align: center;
    line-height: 100px;
    background-color: #eeeeee;
    user-select: none;
}
.test {
    padding: 20px;
    background-color: red;
}

When first selecting an option from the select tag, the value is correctly caught, transferred to the parent via trigger then fed again to the component via the props but for some reason, at rendering, the value of the <select> tag stays unchanged and we have to do the same operation again to see a change. The part quite weird is that when inspecting the element after the first selection of value "tabouret", we find

<select>
<option value="empty"></option>
<option selected="1" value="tabouret">tabouret</option>
<option value="jambon">jambon</option></select>

but

document.querySelector(".target").value  === "empty"

The option is correctly selected even if we can't see it.

If we reiterate the operation we now have

document.querySelector(".target").value  === "tabouret"

Now try to select "jambon":

<option value="empty"></option>
<option value="tabouret">tabouret</option>
<option selected="1" value="jambon">jambon</option>

and

document.querySelector(".target").value  === "empty"

This was tested on Firefox 95.0.2. I haven't been able to find an issue when opening static html page with the same content.

Is this something you've already encountered ?

[ged-odoo]

fixed in owl 2