[BUG]: Some form components not working well with Preset Webpage Plugin

Question

Hi, I've noticed that some form components (like checkbox, radio and select) are not working when gjs is initialized with the Preset Webpage Plugin like in the example below: You can confirm this issue with the online Webpage Demo too https://grapesjs.com/demo.html

Expected Behavior: can select all of them normally (only in preview mode)

Current Behavior: can't select anything (not even in preview mode)

BTW: when I click in the select it shows the options far from its parent (in the first gif) but this is due to this gif when recording it because actually it shows right below the select as the normal behavior, so just ignore that.

artf · Accepted Answer

Ah ok, now I got it. Yeah, forms plugin avoids some default input behavior, so it's intended. I agree that in the preview mode those behaviors could be re-enabled but I think that part might be integrated as a plugin (eg. by using event listeners on the preview command)

RJCAM · Answer

Hum...ok, I'll try to do that, thanks for the help :+1:

artf · Answer

After rebuild the plugin the behavior works as expected, so problem resolved.

Maybe there is a reason why I've done that?! 😅

Via plugin, you can simply extend those components and override handleClick function with your logic, where you prevent only if the editor is not in the preview (editor.Commands.isActive('preview'))

Some form components not working well with Preset Webpage Plugin

Question

Answers (3)

Related Questions and Answers

[Question/bug] Reordering components in the canvas

[Bug]: Blocks icons & font size too small to read

HTML elements ids are incremented on different pages loaded in projectData

Too much recursion

Paid Plugins That Match This Issue

Browse Plugin Categories