Hyperhtml: How to add selected attribute to the option element?

[shanghaikid]

Hi there, here is my codepen link, I use hyperhtml as custom-element render function. I want to build a select.

The select itself works fine. But how can I add selected attribute to the very selected option dom? are there something wrong ?

https://codepen.io/shanghaikid/pen/PaXObv?editors=0010

This is chrome inspector screenshot.

Thank you very much!

[ematipico]

You should redirect this question on Stack Overflow :)

[WebReflection]

not sure I understand your question, this works as expected to me.

Closing anyway since it's not a bug.

[r0mflip]

This is what I can get to, don't judge me. @shanghaikid hope it works for you.

return this.html`
  <select onchange=${this}>
    ${this.options.map(option => {
      const w = hyperHTML.wire(option);
      return ((this.getAttribute("selected") === option.value)
        ? w`<option selected="true" value=${option.value}>${option.label}</option>`
        : w`<option value=${option.value}>${option.label}</option>`);
    })}
  </select>
`;

// or this too

return ((this.getAttribute("selected") === option.value)
  ? w`<option selected="true" value=${option.value}>${option.label}</option>`
  : w`<option selected="false" value=${option.value}>${option.label}</option>`);

not sure I understand your question, this works as expected to me.

@WebReflection the selected attribute is not reflected in the DOM. optionNode.getAttribute('selected') won't work but optionNode.selected works fine.

This might be a bug, IDK, but something is wrong. Every other attribute works, other than selected; It's gotta do something during the creation of the node. Why won't this work?

return this.html`
  <select onchange=${this}>
    ${this.options.map(option => {
      return hyperHTML.wire(option)`<option ${(this.getAttribute("selected") === option.value) ? "selected=\"true\"" : ""} value=${option.value}>${option.label}</option>`;
    })}
  </select>
`;

[WebReflection]

That's how Boolean attributes work on DOM, same goes for button.disabled or even input.value, which doesn't reflect input.getAttribute("value") but here the selected comes from the component, not the option, and all f in the pensato you write o2 you see the second gets selected.

If you submit a form with that option selected it works so I really don't understand what is this question about, but everything you see is how the DOM works, nothing to do with hyperHTML

[r0mflip]

but everything you see is how the DOM works, nothing to do with hyperHTML

Sorry, my bad.

But what is the problem with this code? I might be wrong somewhere. I don't know.

return this.html`
  <select onchange=${this}>
    ${this.options.map(option => {
      return hyperHTML.wire(option)`<option ${(this.getAttribute("selected") === option.value) ? "selected=\"true\"" : ""} value=${option.value}>${option.label}</option>`;
    })}
  </select>
`;

[asapach]

true is not a valid value for selected attribute -- see boolean attributes

[shanghaikid]

Thank you guys, now I understand it.

[WebReflection]

@r0mflip this makes no sense in hyperHTML because you cannot create attributes at runtime

return hyperHTML.wire(option)`<option ${(this.getAttribute("selected") === option.value) ? "selected=\"true\"" : ""} value=${option.value}>${option.label}</option>`;

however, you can specify their values though, so what you want to do is:

return hyperHTML.wire(option)`<option selected=${this.getAttribute("selected") === option.value} value=${option.value}>${option.label}</option>`;