0

I was experimenting with with the lightning-input-rich-text component and followed the instructions for a simple use-case. Everything renders as expected but, when I started typing, the change event did not fire. When I switched to blur, the e.target.value seemed to be stuck on the initial value. It didn't show the changes I'd made.

After more experimenting, it appears that simply typing text into the input doesn't cause an update, but space, backspace and arrow keys () do cause both an internal update and a change event. If I delete a character, add a space, or make a change and then navigate with the arrow keys, then the onchange event handlers are called and the onblur event handlers show all changes since the last space/backspace/arrow key.

Is this documented behavior? It's a pretty major issue if small changes are ignored unless the end-user presses a magical key! For example, adding a missing letter to a word won't trigger a change event and won't show up in a blur event unless the end-user taps an arrow key!

Here is the simple use-case component I created:

import { LightningElement, api } from 'lwc';

export default class PageContainer extends LightningElement {
    directValue = "<strong>Direct</strong>";

    testhandler(e) {
        debugger;
        console.log(e.target.value);
    }

    indirectValue = "<strong>Indirect</strong>";

    test = {
        handler(e) {
            debugger;
            console.log(e.target.value);
        }
    };

}
<template>
    <h1>Direct</h1>
    <lightning-input-rich-text
        value={directValue}
        onblur={testhandler}
        onchange={testhandler}>
    </lightning-input-rich-text>
    <h1>Indirect</h1>
    <lightning-input-rich-text
        value={indirectValue}
        onblur={test.handler}
        onchange={test.handler}>
    </lightning-input-rich-text>
</template>

When I add a few characters to the beginning, middle or end of the default content, the rich text input seems to ignore my changes. When I click away from the component, the blur event handler fires, but with the old content, as if nothing had changed.

1. Input updated:

enter image description here

2. No change event fires

3. The blur event fires, but e.target.value still shows the initial value:

enter image description here

1 Answer 1

1

Calling e.target.setRangeText("", 0, 0) will flush out any changes without changing/corrupting them (though note that the editor might standardize some of the formatting, like wrapping the content in <p> tags).

So, in the onblur event handler, add the above before attempting to read the value:

richTextBlurred(e) {
  e.target.setRangeText("", 0, 0);
  console.log(e.target.value);
}

Note that this will trigger a change event, so if you are listening for both events, be prepared to handle the redundancy of these events.

Before calling setRangeText():

enter image description here

After calling setRangeText():

enter image description here

You must log in to answer this question.

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