0

I am using the lightning-input-rich-text base component and as soon as i mouse click on the body portion of it i get the following error underneath - irrespective whether there is some value or not.

V1->

<lightning-input-rich-text></lightning-input-rich-text>

Uncaught TypeError: Cannot read properties of null (reading 'length') throws at https://*******.visualforce.com/auraFW/javascript/hXMg/aura_prod.js:21:29238

V2->

<lightning-input-rich-text value="dfdfd"></lightning-input-rich-text>

Uncaught TypeError: Cannot read properties of null (reading 'length') throws at https://*******.visualforce.com/auraFW/javascript/hXMg/aura_prod.js:21:29238

Also after the click the body gets cloned somehow as well :

enter image description here

JS Code

formats = [
    'align',
    'background',
    'blockquote',
    'bold',
    'clean',
    'code',
    'code-block',
    'color',
    'direction',
    'font',
    'header',
    'image',
    'indent',
    'italic',
    'link',
    'list',
    'script',
    'size',
    'strike',
    'table',
    'underline',
];


appliedFormats = {
    font: 'arial',
    size: 15
};

templatebody = '';

renderedCallback() {
        if(this.screenchoiceValue == 'screen2'){
            const style = document.createElement('style');
            style.innerText = `c-lookup .slds-input {
                border-top-left-radius: 0px !important;
                border-bottom-left-radius: 0px !important;
            }
            .subjectinput .slds-input{
                border:0 !important;
            }
            .flowruntimeBody{
                padding: 0 !important;
            }
            `;
            this.template.querySelector('.leftnoborder').appendChild(style);

            const editor = this.template.querySelector('lightning-input-rich-text');
            editor.setFormat(this.appliedFormats);
        }
    }


    get body(){
        return this.templatebody;
    }

    set body(tbody){
        this.templatebody = tbody;
    }


connectedCallback() {
getEmailTemplate({id : this.recordIdValue})
                .then(result => {
                    this.subject = result[0];
                    let temp = result[1];
// TRIED WITH REPLACEMENTS - WHETHER THIS HELPS - BUT NO

                    temp = temp.replace( /(<([^>]+)>)/ig, '')
                    temp = temp.replace( /<span/ig, '<p');temp = temp.replace( /span>/ig, 'p>');
                    temp = temp.replace( /<br\/>/ig, '');
                    this.templatebody = temp;
                })
                .catch(error => {
                    this.error = error;
                });

}


handleBodyChange(event){

    event.preventDefault();

    const editor = this.template.querySelector('lightning-input-rich-text');

    if (event.target.value) {
        this.templatebody = event.target.value;
    } else if(editor) {
        editor.value = this.templatebody;
        editor.setFormat(this.appliedFormats);
    }
}

--> POSSIBLE CAUSE / SOLUTION I removed the whole renderedCallback and the error is gone !?

3
  • Please share the relevant JS code as well. Mar 21, 2022 at 11:13
  • @RahulGawale shared the JS Code ... thanks for having a look
    – owsata
    Mar 21, 2022 at 11:22
  • @RahulGawale i have set a few breakpoints in chrome developer tools .. but the said error message appears before any breakpoint is triggered
    – owsata
    Mar 21, 2022 at 11:36

1 Answer 1

0

POSSIBLE CAUSE / SOLUTION I removed the whole renderedCallback and the error is gone !?

You must log in to answer this question.

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