Overwrite Value of Lightning-Input-Rich-Text Field Imperatively After User Enters Value

Question

I am trying to overwrite the value of a lightning-input-rich-text field imperatively via a button click. In the code below, line 2 of the javascript file, this.assess_updates_input.value = '', causes a Cannot set property 'value' of undefined error. I have tried other things, such as this.assess_updates_input = '', but none have been able to overwrite the field.

How can a lightning-input-rich-text field be overwritten after a user has input a value?

Html

    <lightning-input-rich-text
      name="assess_updates_input"
      value=""
      onchange={handleAssessUpdatesChange}
    ></lightning-input-rich-text>

    <lightning-button label="Refresh" variant="brand" onclick={refreshMeetingInfo}>
    </lightning-button>

JS

    1: refreshMeetingInfo() {
    2:   this.assess_updates_input.value = '';
    3: }

Answer 1

you need to clear the value property of the rich text element in your JS

import { LightningElement } from 'lwc';

export default class SampleNestedTable extends LightningElement {
    refreshMeetingInfo() {
        const selectElement = this.template.querySelector('lightning-input-rich-text');
        selectElement.value  = "";
    }
}

Answer 2

The easiest way to simply assign a trackable variable and handle it that way.

For example:

HTML

<lightning-input-rich-text
  name="assess_updates_input"
  value={myVariable}
  onchange={handleAssessUpdatesChange}
></lightning-input-rich-text>

<lightning-button label="Refresh" variant="brand" onclick={refreshMeetingInfo}>
</lightning-button>

JS

@track myVariable = ''; //Initialize if you must

refreshMeetingInfo() {
    this.myVariable = '';
}

Don't forget to add track to your import line, the one below is an example of how it could look.

import { LightningElement, track } from 'lwc';