Text area not showing upon load

Question

The video below shows the problem. Upon load in a modal dialog, the rich text editor doesn't show the text area, until I click the 'source code' button. (Also, if I make it resizable, dragging the resize corner will make the text area show up.)https://www.loom.com/share/f8d78e51f3094062ab213501d3cb0054I've tried all kinds of options with floating toolbar on/off, and can't figure out how to make it consistently show up. private readonly object[] Tools = new object[] { "Bold", "Italic", "Underline", "|", "SourceCode", "|", "Alignments", "OrderedList", "|", "CreateLink" };Using the latest Nuget packages:

Indrajith Srinivasan · Accepted Answer

Hi Kirk, Good day to you, We have checked the shared vide demo. The Rich Text Editor height is not set properly when placed inside the SfDialog, hence the reported issue occurs. We suggest you to call the Rich Text Editor RefreshUI method in the SfDialog Opened event to resolve the reported issue. Refer the below code blocks for reference. @code{ SfRichTextEditor RichTextEditorObj; private void onopen() { this.RichTextEditorObj.RefreshUI(); } } Please let us know if the solution helps, Regards, Indrajith

Revanth Krishnan · Answer

Hi Kirk,

Greetings from Syncfusion support.

We have validated your query “Rich Text Editor's text area not show upon load”. We have tried to reproduce the issue in the following ways. But we couldn’t reproduce the issue in our end.

Used the shared code snippet exactly.
Tried by rendering the Rich Text Editor inside the modal dialog
Tired by rendering the Rich Text Editor individually.

We suspect that the issue may have occurred due to the value property bind in the Rich Text Editor doesn’t return any value or invalid.

<SfRichTextEditor @ref="RichTextEditor" @bind-Value="@Model.Summary" Height="300" EnableTabKey=true EnableAutoUrl=true EnablePersistence=true AutoSaveOnIdle=true Placeholder="Type your note." CssClass="is-sf-rte">

<RichTextEditorToolbarSettings Items="@Tools" />

</SfRichTextEditor>

We have prepared a sample where Rich Text Editor is rendered inside a Modal dialog where the Rich Text Editor’s text area is shown properly,

Sample: https://www.syncfusion.com/downloads/support/forum/157121/ze/RichTextEditor_Focus-1230717071

Please refer the above code snippet and the sample and let us know if it resolve your issue.

Regards,

Revanth

Kirk · Answer

Thanks for the quick response.I just figured out it has something to do with hiding the dialog by default, and then showing it.If you show the button but hide the dialog, and then click the button, it shows the same problem I was having.https://www.loom.com/share/e00ba689feec46e3a394beb15a0a9609-----------

@if (this.ShowButton) { }

@code{ private class MyModel { public string Summary { get; set; } } SfTextBox TextboxObj; SfRichTextEditor RichTextEditorObj; private string TextBoxValue; private MyModel rteValue { get; set; } = new MyModel(); //"

Rich Text Editor's value is visible.

"; private bool Visibility { get; set; } = false; private bool ShowButton { get; set; } = true; private void DialogOpen(Object args) { this.ShowButton = false; } private void DialogClose(Object args) { this.ShowButton = true; } private void OnBtnclicked() { this.Visibility = true; } private readonly object[] Tools = new object[] { "Bold", "Italic", "Underline", "|", "SourceCode", "|", "Alignments", "OrderedList", "|", "CreateLink" };}

Kirk · Answer

Great, thanks.  That did solve it!

Revanth Krishnan · Answer

Hi Kirk, 
 
Thanks for the update, 
 
We are glad that the reported issue is resolved. Please let us know if you need any further assistance. 
 
Regards, 
Revanth