Blocks containing <input> elements revert to default values on adding new blocks

[ghost]

If I define a simple block html containing an input element for use in drag-and-drop placement, then drop one of these onto the canvas, and put the text "TestInput" in the input, if I drag a second node in to attach, the user-input value is wiped, every time.

This happens for all user-editable values, like checkboxes, radiobuttons etc. They default to whatever they were at time of creation.

Likewise, the values are exported in flowy.output() but I see that blocks is ignored in floww.import(), and only blocksarr is used, so any custom values set on a block can not be reimported.

[cdebattista]

weird behavior I don't have this. Check the video. https://github.com/alyssaxuu/flowy/issues/29#issuecomment-701043046

[ghost]

@cdebattista Thanks for the link, its must be strange behavior on my side so.

Would you mind sharing a sample of how you set up your blocks and how you are adding them? I must be doing something incorrectly.

[cdebattista]

I have a block function returning the HTML for the menu only.

block: function (block) {
        return '<li class="list-group-item create-flowy">\n' +
                    '<input type="hidden" name="' + block.class + '_class" class="block-input-class automation_class" value="' + block.class + '">' +
                    '<input type="hidden" name="' + block.class + '_value" class="block-input-name automation_value" value="' + block.name + '">' +
                        block.title +
                '</li>';
    },

The two inputs are for dynamics calls.

onSnap: function (block, first, parent) {
        let block_class = block.querySelector(".automation_class").value;
        ...
        let blockid = block.querySelector('.blockid');
        ...
       block.innerHTML = blockid.outerHTML + div.outerHTML;
}

div.outerHTML refer to the HTML of my custom block Important you need to keep the blockid HTML

Now that I know the block_class I can load the right module. Let's say the class is "ActionField"

window.ActionField = {
    init: function () {
        this.info = {
            class: 'ActionField',
            name: 'field',
            title: 'Modifier le champ',
            disallowFirstParents: [
                'TriggerContactDelete',
            ],
            allowParents: [
                'TriggerContactAdd',
                'TriggerContactAddApi',
                'TriggerContactEdit',
                'ConditionField',
                'ConditionStep',
                'ConditionSource',
                'ConditionMarketing',
                'ActionDelay'
            ],
            blocks: {
                canva: require('./../html/block.html')
            },
            selects: [
                {name: 'ActionField_selectField', hidden: 'field_name', populate: true, function: 'selectField'}
            ],
            inputs:[
                {name: 'ActionField_Value', hidden: 'field_value'}
            ]
        }
    },
    ...
}

We have the HTML here canva: require('./../html/block.html')

<div class="fmf-card fmf-card_automation">
	<h3 class="fmf-title4">Action : <strong>champ</strong></h3>
	<div class="d-flex">
		<div class="fmf-form__block pt-2">
			<div class="fmf-form__select">
				<select class="no-drag" name="ActionField_selectField"></select>
			</div>
		</div>
	</div>
	<div class="d-flex">
		<div class="fmf-form__block pt-2">
				<input autocomplete="off" class="fmf-form__input" type="text" name="ActionField_Value">
		</div>
	</div>
</div>
<input type="hidden" name="automation_type" class="block-input-type automation_type" value="action">
<input type="hidden" name="automation_class" class="block-input-class automation_class" value="ActionField">
<input type="hidden" name="automation_value" class="block-input-value automation_value" value="field">
<input type="hidden" name="automation_identity" class="block-input-identity automation_identity">
<input type="hidden" name="field_name">
<input type="hidden" name="field_value">

My exemple can be complexe. I do like that cause I want to create module easily. Like that I just need to create a JS Class module and the HTML.

[iamnikhilrohan]

Even i'm facing the same problem. Anyone found a solution?

[ronaaron]

I also have the same problem; came here for a solution, but didn't find one...

[ronaaron]

OK. Debugging this, it turns out the problem is in function drawArrow(), which sets the canvas_div.innerHTML; subsequent to that, the input value has been changed

[ronaaron]

I've got a solution. Add an 'onchange' handler to the input and in that function, set the 'value' attribute of the innerHTML to the value you want.

I'm using JQuery, so my function looks like this:

  function keepval(f) {
    $(f).attr('value', $(f).val());
  }

[Santoshgokulc]

I've got a solution. Add an 'onchange' handler to the input and in that function, set the 'value' attribute of the innerHTML to the value you want.

I'm using JQuery, so my function looks like this:

  function keepval(f) {
    $(f).attr('value', $(f).val());
  }

hey @ronaaron hey i've tried doing your method but i'm getting the function not defined