Input component while load changing as a div tag

[senthil177cse]

Hi @artf ..
Thank you for your amazing grapesjs.
in below you can see video while adding the input component in canvas it DOM added like INPUT tag only but after loaded the page its chnaging as a DIV tag.. below i have added json for that input also...

{
"htmlCSS": [
{
"selectors": "i3mx",
"style": {
"width": "100%",
"height": "100%",
"padding-top": "15px",
"__p": false,
"padding-bottom": "15px",
"padding-right": "15px",
"padding-left": "15px",
"background-color": "#eaeaea"
},
"mediaText": "(max-width: 480px)",
"atRuleType": "media"
},
{
"selectors": "ivsf",
"style": { "width": "100%", "height": "4%", "__p": false },
"mediaText": "(max-width: 480px)",
"atRuleType": "media"
}
],
"htmlJSON": [
{
"tagName": "section",
"attributes": { "type": "grid", "id": "i3mx" },
"components": [
{
"type": "input",
"void": true,
"attributes": {
"required": true,
"visibility": true,
"type": "text",
"placeholder": "testing placeholder",
"id": "ivsf"
}
}
]
}
]
}

can you explain me why its happening? For ref refer the attached video.

Mobility.Editor.1.mp4

.

[artf]

I can't reproduce it on the official demo, it might be related to your code (eg. custom input component). Are you able to create a reproducible demo?

[senthil177cse]

below code is my custom input component...

this.editor.BlockManager.add('custom_input_block', {
label: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M4 10h1v4H4z"></path></svg><div class="gjs-block-label">Input</div>,
order: 2,
category: 'Component Block',
draggable: true,
attributes: {
class: '',
},
content: <input type="text" style="width:100%; height: ;">
});

while loading i am getting console warning...

[artf]

Seems like you don't register your input component properly, as I said I'd need to check a reproducible demo to understand where might be an issue.

[senthil177cse]

Hi @artf
below link is the reproducible demo...
create one iniput component under form block.. vide also i have added please check and let where i am getting problem.
https://codepen.io/senthil71cse/pen/GRQdmzM

A.Pen.by.senthilkumar.mp4

[artf]

As indicated here, the custom component definition has to be placed inside a plugin.

[senthil177cse]

now issue got resolved....
Thanks for your valuable response @artf