resetting form values inside lit elment doesnt't trigger re-render

[jishnukoottala]

Description

I have a form, having 3 input elements, I want to set it to null value (reset), after the form is submitted, but after changing the properties, the element doesn't re render

Code

import { LitElement, html, css } from 'lit-element'
import { connect } from 'pwa-helpers/connect-mixin.js'
import '@polymer/paper-icon-button/paper-icon-button.js'
import '@polymer/iron-icons/iron-icons.js'

// This element is connected to the Redux store.
import { store } from '../store.js'

import { addItem } from '../actions/shoppinglist'

class ShoppingListForm extends connect(store)(LitElement) {
  static get styles () {
    return [
      css`
        :host {
          display: block;
        }

        .form_element {
          max-width: 100%;
          text-align: center;
          margin-bottom: 2em;
        }
        .form__input {
          box-sizing: border-box;
          background-color: transparent;
          padding: 0.7rem;
          border-bottom-right-radius: 15px 3px;
          border-bottom-left-radius: 3px 15px;
          border: solid 3px transparent;
          border-bottom: dashed 3px #6178cc;
          font-family: 'Kaushab Script', cursive;
          font-size: 20px;
          //   color: hsla(260, 2%, 25%, 0.7);
        }

        .form__input:focus {
          outline: none;
          border: solid 3px #6178cc;
        }
        .addicon {
          color: #2641a5;
        }
      `
    ]
  }

  // properties getter
  static get properties () {
    return {
      id: { type: String },
      title: { type: String },
      quantity: { type: String },
      type: { type: String },
      completed: { type: Boolean }
    }
  }

  constructor () {
    super()
    this.id = Math.floor(Math.random() * Math.floor(15643213))
    this.initialTitle = ''
    this.title = this.initialTitle
    this.quantity = ''
    this.type = ''
    this.completed = false
  }

  render () {
    return html`
      <form class="form_element">
        <input
          type="text"
          name="itemname"
          value="${this.title}"
          id="title"
          placeholder="Item Name"
          @input="${this.itemnamechange}"
          required
          class="form__input"
        />
        <input
          type="text"
          name="itemqty"
          placeholder="Item quantity"
          value="${this.quantity}"
          @input="${this.qtyChange}"
          class="form__input"
        />
        <input
          type="text"
          name="qtytype"
          placeholder="type - kg, ltr, pkt .."
          value="${this.type}"
          @input="${this.typeChange}"
          class="form__input"
        />

        <paper-icon-button
          icon="add"
          @click="${this.addButtonClicked}"
          class="addicon"
        ></paper-icon-button>
      </form>
    `
  }

  //   firstUpdated () {
  // store.dispatch(getAllProducts())
  // }

  addButtonClicked (e) {
    const item = {}
    item.id = this.id
    item.quantity = this.quantity
    item.type = this.type
    item.title = this.title
    item.completed = this.completed
    console.log('-------item is ', item)
    store.dispatch(addItem(item))

    // not working.. setting form values to null after submit
    // this.performUpdate()
    this.resetValue()
  }

  resetValue () {
    this.title = this.initialTitle
    this.type = ''
    this.quantity = ''
    this.dispatchEvent(new CustomEvent('reset', { detail: [] }))
    this.requestUpdate()
  }
  itemnamechange (e) {
    this.title = e.target.value
  }

  update (changedProperties) {
    super.update()
    console.log('Received instructions to set title to : ' + this.title)
  }
  async performUpdate () {
    await new Promise(resolve => {
      resolve()
    })
    super.performUpdate()
  }

  qtyChange (e) {
    this.quantity = e.target.value
  }

  typeChange (e) {
    this.type = e.target.value
  }

  //   // This is called every time something is updated in the store.
  //   stateChanged (state) {
  //     this.items = state.shoppinglist
  //   }
}

`window.customElements.define('shopping-list-form', ShoppingListForm)`

Expected Results

After submitting the form, the input elements must be set to a default value or empty

Actual Results

it doesnt update the element

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: ^2.0.1.
• webcomponents: ^2.2.4

[Westbrook]

There are a handful of previous issues that go into this more deeply (i.e. #144), but if you want to be updating input elements value (displayed) in the render() method, you need to set that as a property .value="${this.type}". The attribute is only read on initial render as per the HTML specification.

This is one of the few attribute/property pairs that don't update circularly.

[sorvell]

That's right. You'll want to (1) bind to the value property, not attribute (use .value=...); (2) make sure to update rendering when the value of input changes (probably using a listener on the change event, @change=...). See the example in this comment for more info..