select({ value: "..." }) does not select default item?

[danawoodman]

When rendering a select with a value set, the select does not automatically select the item passed in as value:

function Form() {
  const data = reactive({
    current: "6",
    items: [
      { label: "Item 5", value: "5" },
      { label: "Item 6", value: "6" },
      { label: "Item 7", value: "7" },
    ],
  });

  return list(
    select({
      oninput: (e) => (data.current = e.target.value),
      value: () => data.current,
    }),
    data.items,
    (i) => t.option({ value: i.val.value }, i.val.label),
  )
}

To get the items to select, you have to pass selected: data.current === i.val.value in your option.

Is this expected behavior?

[sirenkovladd]

In fact, this is the expected behavior If you simplify your function to pure javascript, you will see that value is assigned to select, which does not yet have children here is an example in pure javascript https://jsfiddle.net/6csxohn4/

To fix this, you need to set the value after the children have been initialized for example, like this https://jsfiddle.net/1bpz2kah/

[danawoodman]

Ok cool, thanks for the examples :)

I'm assuming my option using selected is also perfectly valid?

[Tao-VanJS]

I'm assuming my option using selected is also perfectly valid?

Yes.