Search code examples
vaadinvaadin-flow

Vaadin 24: TinyMCE for Flow (Team Parttio version) Initial Render Blank

I'm using the TinyMCE editor for Vaadin Flow by Team Parttio (https://vaadin.com/directory/component/tinymce-for-flow) with Vaadin 24.1.3 and Version 4.0.5 of the TinyMCE Editor.

This component is EXCELLENT - except for one thing: I'm using it on an edit form with a grid. The first time the edit form is shown from a click on the grid, the TinyMCE editor is blank. Every other grid click to show the edit form - the editor is properly populated. When you click another form (from the side navigation) and come back to the grid and click the edit button - same thing happens - the editor is blank. Subsequent editing works perfectly.

Here's what I've tried:

  • I've checked the bindings - and all is good - the component is getting the proper data;
  • I tried having only the editor object on the edit form - same problem;
  • I tried putting it in a dialog - same problem;
  • Changed the order of when the binding happens compared with the showing of the edit form - same problem;
  • When the component is visible (e.g. not hidden at the start) and an edit click from the grid happens - it renders correctly every time;

I'm sure it's something simple... I'm at a loss. If anyone can help me solve this issue - it would be greatly appreciated!

Solution

  • The answer is to not use "setvisible" on the form, but to use CSS classes (form.addClass("xyz")) to then set the visibility and display of the form. That way they are rendered correctly (and appear in the DOM if you inspect the page) but are hidden from the user.