Rich Text Editor value is undefined

[George23]

Context:

• My app has a page with 3 rich text components along with lot of other input components.
• I am assigning a default value to all the input components using data from an API call.

Issue (This happens like 30% of the time, not always)

When I try to edit the value of any component on the page and hit submit, in some cases the value of the rich text input is returned as <p>undefined</p> but when I check the state of the component the value attribute has the correct value.

I even tried adding a button that just console logs <richtextname>.value but still it is <p>undefined</p>. I can see the value correctly rendered on the text box and also the value attribute has the correct value.

Once I edit a rich text field that was once undefined, I get the correct value using <richtextname>.value.

Also this happens for all the 3 rich text boxes at once but not to any other components.

This is how I'm setting the default values. I don't think it matters since no other component has the issue and editState is true by default.

Replicating the Issue

There is no proper way to replicate the issue that I know of, it just happens randomly. One pattern I noticed is that if I tried editing the form like immediately after the form has loaded the issue is more likely to happen.

But what does not make sense to me is that why is value on the state different from <richtextname>.value. It is not because the values are not loaded correctly because when the console log is called. I even tried using a button that just console logs on click but the value is still <p>undefined</p>

Send help!

[msapcili]

Hello,

I think my experience is related with this issue.

We use multiple rich text editors to edit our contents. When we change some fields, the other fields may turn into empty value.

We simply use setValue for setting values of rich text fields.

I succeed to get screen shots when this error occurred.

As you see, when I write "materials.value" but did not press enter, the tooltip shows the real value of the field.

After press the enter, the field's value seems as similar to empty ("<p><br></p>")

So when the user press save, this empty value will be written to the db.

We cannot provide these panels to our content moderator team without solving the issue. Can you help us?

Best,

[Kabirdas]

Hey @msapcili!

Are you using your rich text editors in a list view by any chance? If so, can you try indexing the component to see if it returns the correct value?

[msapcili]

Sorry for the late reply @Kabirdas.

Now I could have a chance to test it. We were not using rich text editors in a list view but I tested it by copying the app.

It works fine with this workaround solution. I've tried to reproduce the error but it seems totally fine. Thanks for your quick help.

By the way, I think it is still a serious bug if someone uses rich text editors separately. Anyway, I'm happy to solve the issue for our content team

Best,
Mustafa

[Kabirdas]

Hey @msapcili! No worries, it looks like I misunderstood exactly what was going on here. Good to hear that the workaround may be sufficient for now, but would you mind providing some more context on the initial bug?

1. I know it's been happening inconsistently for both of you but is there any pattern to when it might show up more often?
2. You mentioned it occurring if you change the value of some fields, is that specifically when done with the .setValue method or does it happen when someone edits the RTE directly as well?
3. Are there any other operations fire as part of the flow for editing a text field?

Also, are you using.setValue as well @George23?

[msapcili]

Kabirdas, thanks for your great support and sorry for the delay.

1. We constantly reproduce the error with the same content but could not identify the pattern.

2. After we get content's details from mongodb, run the script below:

console.log("Initializing edit form...");

if(urlparams.id === undefined || !getContentQuery.data) {
  throw new Error("No content group");
}

contentGroupEditForm.setHidden(false);

console.log("Getting contents...");
await getContentsService.trigger();

console.log("Filling inputs...");

let selectedContentsDuringLesson = [];
let selectedContentsForHome = [];

getContentQuery.data.contents.map(x => {
  if(x.itemSection === "duringLesson") {
    selectedContentsDuringLesson.push(x.item);
  } else if(x.itemSection === "forHome") {
    selectedContentsForHome.push(x.item);
  }
});

title.setValue(getContentQuery.data.title);
status.setValue(getContentQuery.data.status);
language.setValue(getContentQuery.data.language);
image.setImageUrl(getContentQuery.data.image);
// fileInput1.value.setValue(getContentQuery.data.image);
durationInterval.setValue({
  "start": getContentQuery.data.durationIntervalInMinutes.min,
  "end": getContentQuery.data.durationIntervalInMinutes.max,
});
introduction.setValue(getContentQuery.data.introductionText);
learningObjectives.setValue(getContentQuery.data.learningObjectivesText);
materials.setValue(getContentQuery.data.materialsText);
curriculumAlignment.setValue(getContentQuery.data.curriculumAlignmentText);
sustainableDevelopmentGoals.setValue(getContentQuery.data.sustainableDevelopmentGoalsText);
contentsDuringLesson.setValue(selectedContentsDuringLesson);
contentsForHome.setValue(selectedContentsForHome);

console.log('Done.');

I added a screen record. It starts after the mongodb query and this script ran.

3. No.

Here is the video:

[Kabirdas]

Thanks for all the context @msapcili! I still have yet to reproduce the behavior but this gives some more to go off of. I'll check in with the dev team and report back if I find more information.

Is this on an instance that's being hosted by Retool? If we stepped into your org should we be able to reproduce the behavior (i.e. do your resources have any user-specific authentication), and would you mind if we tried?

[msapcili]

Yes, it was being hosted by Retool but I accidentally changed it to another dashboard. I've checked the history but the history list is limited so I cannot revert back to create you the board again.

[Kabirdas]

I see, that's understandable. You mentioned you could consistently reproduce the error with the same content - do you mean a specific piece of text was being particularly problematic? If so, would you be open to sharing it for us to test with on our end?

I'm also curious to know what browser/os you're using or if it's showing up on multiple different platforms.

[msapcili]

Hello dear Kabirdas and Retool team,

After a long time, we've reproduced the error with a painful experience again. Our content team feels miserable after they lost their work because of this issue.

Anyway, we can reproduce the error now and can share an app and a content to test it. Can you please suggest me the way to share it with you?

Best,

[Tess]

Hi @msapcili,

Sorry to hear this! But yes, if you can share an export, I'd love to take a look:

[msapcili]

Sure, I can. How should I share the file with you? I cannot upload from here. It says new users cannot upload attachment. Also I don't know that the exported file contains any secrets.

Best,

[Tess]

Are you able to send it as a direct message? The export will have some hardcoded data, but we wont have the ability to run any resource queries or see resource/Retool credentials

[msapcili]

There is no direct message option as I see.

Please download from the link below:
https://twinarcadiamedia.blob.core.windows.net/app-files/test/Content%2520Group%2520Edit%2520-%2520Retool%2520Bug%20(1).json

[msapcili]

@Tess Any updates? We're still waiting to migrate our panels.

[Tess]

Hi @msapcili Thanks so much for sending the file. Unfortunately, I don't have an update yet But I just added some notes to the internal ticket. I'll keep this thread updated if I hear anything

[Robby_Ceyssens]

Hi,

How did you manage to workaround the issue with the seperate rich text editors by using a listview. I tried using a list view but the issue still remains the same in my case?

I use item.name for the text field and item.value for the rich text editor value in the list view.