[FIX] component: t-model properly works with select

The initial value was not set on the select tag.

closes #271

src/qweb/extensions.ts

@@ -248,12 +248,13 @@ QWeb.utils.toNumber = function(val: string): number | string {
 QWeb.addDirective({
   name: "model",
   priority: 42,
-  atNodeCreation({ ctx, nodeID, value, node, fullName }) {
+  atNodeCreation({ ctx, nodeID, value, node, fullName, addNodeHook }) {
     const type = node.getAttribute("type");
     let handler;
     let event = fullName.includes(".lazy") ? "change" : "input";
     if (node.tagName === "select") {
       ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`);
+      addNodeHook('create', `n.elm.value=context.state['${value}'];`)
       event = "change";
       handler = `(ev) => {context.state['${value}'] = ev.target.value}`;
     } else if (type === "checkbox") {

tests/component/__snapshots__/component.test.ts.snap

@@ -1163,6 +1163,11 @@ exports[`t-model directive on a select 1`] = `
     p2.props = {value: context.state['color']};
     extra.handlers['change' + 2] = extra.handlers['change' + 2] || ((ev) => {context.state['color'] = ev.target.value});
     p2.on['change'] = extra.handlers['change' + 2];
+    p2.hook = {
+      create: (_, n) => {
+        n.elm.value=context.state['color'];
+      },
+    };
     var _3 = '';
     let c4 = [], p4 = {key:4,attrs:{value: _3}};
     var vn4 = h('option', p4, c4);

tests/component/component.test.ts

@@ -3585,6 +3585,26 @@ describe("t-model directive", () => {
     expect(env.qweb.templates.SomeComponent.fn.toString()).toMatchSnapshot();
   });
 
+  test("on a select, initial state", async () => {
+    env.qweb.addTemplates(`
+    <templates>
+        <div t-name="SomeComponent">
+            <select t-model="color">
+                <option value="">Please select one</option>
+                <option value="red">Red</option>
+                <option value="blue">Blue</option>
+            </select>
+        </div>
+    </templates>`);
+    class SomeComponent extends Widget {
+      state = { color: "red" };
+    }
+    const comp = new SomeComponent(env);
+    await comp.mount(fixture);
+    const select = fixture.querySelector("select")!;
+    expect(select.value).toBe("red");
+  });
+
   test(".lazy modifier", async () => {
     env.qweb.addTemplates(`
     <templates>