0

I've been having some issues getting and setting mdc input dom element values, I managed to get some of those values on text input fields using the onchange method through the event property on that method. I'm also able to query the input element and set the value property to the desired value.

@track property
<input ... value={property} />

doesn't work either.

I can get around this issue with text input fields but I'm having issues with mdc select and mdc checkbox, aria-selected and selected attributes for both elements but non seems to work.

1 Answer 1

1

They're normal HTML elements, so you need to refer to the documentation for HTML (e.g. MDN). For example, to update a checkbox, use onchange and check the checked attribute, and for select, use onchange and check selectedIndex when multiple is false, or selectedOptions when multiple is true.

LWC only has one-way bindings, which was always buggy in Aura to begin with, which is why we have to either handle events or query the input values on-demand when you need them.

I've included a Playground that demonstrates how to handle each.

3
  • I'm not using the html select tag as I'm using material design with lightning web components, that worked for the checkbox but I'm still having issues with the select, I've managed to capture the onclick event but I get a lot of warnings and the component gets really slow. Any idea?
    – Rui Vieira
    Commented Mar 22, 2020 at 15:46
  • @RuiVieira Did you get this from an open source thing, or did you write your own? Can you share your implementation?
    – sfdcfox
    Commented Mar 22, 2020 at 16:09
  • I'm sorry @sfdcfox I'm not allowed to share the code, I implemented the Outlined select referenced in material.io/develop/web/components/input-controls/select-menus the list is rendered as a template for:each where if a row has the property "selected" set to true the li element is created with aria-selected="true" and without if selected is false. Right now I'm using on click inside each li element, if I used before it would get fired when opening the list. It's lighter but not ideal
    – Rui Vieira
    Commented Mar 23, 2020 at 16:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .