Workaround for client-side consequences of Invisible setting?

Hello, I’m running into a problem with the TinyMCE for flow plugin (https://vaadin.com/directory/component/tinymce-for-flow) …it’s in an edit form on a grid page that is set invisible on page creation. Because of this, the first time the user clicks “edit” in the grid, it comes up blank. After some testing, I’m certain that it’s because it’s invisble at first. After the first time the user clicks “edit”, closes the edit form and then clicks “edit” again, everything works properly. So I’m running into the consequences detailed on this page:
https://vaadin.com/docs/v14/flow/components/tutorial-component-basic-features#client-side-consequences-of-the-invisible-setting
If a component is set as invisible before it is rendered for the first time, the corresponding element in the DOM is not created, but the server-side structure is maintained. When the component is set as visible, the DOM is properly updated.

Is there a known workaround for this sort of problem, a component not working properly because it’s invisible on page creation?

Hi! I’m the maintainer of the add-on. IIRC I was fixing some related feature recently. Which version are you use? Could you try with the latest one?

Hello Matti! Thanks for checking in. I actually did solve the issue - it wasn’t really unique to the plug in, just that it wasn’t instantiated.

So the fix was to, instead of using .setVisible(), and flipping it to false and true, to instead use CSS classes to show and hide the section that had the plugin. That way it just isn’t shown to the user on the page, but still exists in the DOM. I did see some other, more complicated workarounds if more security was needed, but we didn’t need that level of complexity.

Sounds like a workaround to a bug to me. Could you share the version(s)? I could then know if I should look into this at some point or not.

the issue is detailed here actually:
https://vaadin.com/docs/latest/create-ui/basic-features#client-side-consequences-of-the-invisible-setting

If a component is set to invisible before it’s rendered for the first time, the corresponding element in the DOM isn’t created, but the server-side structure is maintained. When the component is set to visible, the DOM is updated.

that’s what we ran into - the edit form that held tinymce was set to invisible until the user clicked “edit” - so it wasn’t in the DOM, and data couldn’t be populated the first time “edit” was clicked.

we’re working currently in vaadin 21.4.3 and tinymce plugin 4.0.4, any higher and we got compile failures around some other dependency that we weren’t prepared to troubleshoot at the time.