Get the Current Value from a Lightning-Input-Rich-Text

inputrichtextlightning-web-componentsonchange

QUESTION(s)

Is there a way to increase the polling rate of a lightning-input-rich-text field?
OR
Can I just get its current value without needing an onChange event?
OR
Can I force an onChange event to occur just before I need to use its value?

INFORMATION

I need a way to get the current value from a lightning-input-rich-text field as when using the onChange(event), it's just too slow, it always lags way behind the input that is actually in the field:
enter image description here

enter image description here

It's missing ' behind' and even clicking in and out of the field doesn't cause it to update.
Typically the user is going to slap their message in and instantly go to send, so I need it to be up-to-date ready for that.

I am using the standard event handling code with a log().

    @track mailBody;

    bodyChange(event) {
        this.mailBody = event.detail.value;
        console.log(this.mailBody);
    }

This is a problem, because I need to use the text from this field for emails, but it's always missing some text.

A lot of the times when I tried to test it, I'd start typing in the field, go to send and receive an email with no body as it hadn't captured the random characters I had spammed in there yet, I don't even type fast, so it's just being lazy lol.

Best Answer

Avoid using onChange and may be use the querySelctor instead as shown below

<template>
   <lightning-input-rich-text value={myVal}>
   </lightning-input-rich-text>
   <lightning-button label="send" onclick={handleClick}></lightning-button>
   <lightning-formatted-rich-text value={myVal}></lightning-formatted-rich-text>
</template>

The Javascript file

 import { LightningElement } from 'lwc';
 export default class RichTextExample extends LightningElement {

    myVal = '';

    handleClick(event) {
      const value = this.template.querySelector('lightning-input-rich-text').value;
      this.myVal = value;
  }
}
Related Topic