0

I have very simple Lit component with an attribute.

I can change this attribute outside and Lit component receives new value and can display it, for example in the <input> tag.

This operation works as many times as I change the attribute. Problem occurs when I change the value manually in the <input>.

Component looks like this:

cmp.ts

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('cmp-tmp')
export class CmpTmp extends LitElement {
  
  @property({ type: Number })
  dt = 0;

  public render() {
    
    return html`
        <input value=${this.dt}>`;
  }
}

index.html

<!DOCTYPE html>
<head>
  <script type="module" src="./cmp.js"></script>
</head>
<body>
  <cmp-tmp dt=""></cmp-tmp>
  <button onclick="document.querySelector('cmp-tmp').setAttribute('dt', Date.now())">Set Date</button>
</body>

Playground

Steps to reproduce:

  1. Click "Set Date" button -> attrbiute was changed and input received new value
  2. Click "Set Date" button -> attrbiute was changed and input received new value
  3. Type something in the input field
  4. Click "Set Date" button -> attrbiute was changed, new value was displayed in the console but input didn't received new timestamp
Pavel K
  • 21
  • 2

1 Answers1

0

If somebody has the same issue: . should be used to bind value property.

i.e. <input .value=${this.dt}>

More details here

Pavel K
  • 21
  • 2
  • 2
    To add, this happens specifically because of the way the `value` attribute works for `` elements. The attribute controls the text field until user interaction changes that, after which the attribute has no effect and the property controls the text field, hence the `.` is required for the property binding. – Augustine Kim Feb 07 '23 at 00:04