Custom trait options for input group not working as expected

[wi-mm]

Hello,

I am trying to add a few different traits to the input element but am unable to understand how to bind the traits with the input. The default traits (placeholder, required, etc.) work fine but not the custom ones.

I created a JS Fiddle to show what's not working.

Here is the following I am trying to achieve:

• Add custom traits to the input fields, like an error message, and add a tooltip
• When the user enters any values in those fields, trigger a JS function to render a span tag with the tooltip for the input
• Create a hidden div below the input that should contain the error message text

I have gone through a ton of articles and also checked a lof of the issues on GitHub and also reviewed the documentation, but as a new learner of GrapesJS builder, I haven't figured out a solution yet.

JS Fiddle link: https://jsfiddle.net/pshrLew4/3/
Explainer video: https://d.pr/v/SZ1Wkk

Any help would be greatly appreciated.
Malek

[dm-siegel]

You should read this section: https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components. Specifically in the "Add Traits To Component" section where it references the changeProp.

From what I can tell, you are setting a property, not an attribute because of your changeProp: 1. That is fine if you don't want it to show up as an attribute in the tag, but you will want to react to the property change to add your span tag for error message etc.

[wi-mm]

@dm-siegel Thank you for the insights. I figured out what I was doing wrong and got it working.