Wordpress Gutenberg blocks: Input fields are not editable|Programmer puzzle solving

Describe the bug

In WordPress 5.0.2 with Gutenberg in the core (not the plugin), when using input fields to capture text from the user and providing a value= from props.attributes, the input fields are not editable. The outputted html code looks fine (no disabled or readonly attributes exist). However, in the browser, I am not able to change/edit the value in the input field. (Update: it tries to inject an [object Object] into text field.) Other components, like ColorPalette and Button, are working just fine.

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

OS: Windows 10
Browser Chrome and Firefox
Version 71.0.3578.98 and 63.0.3

Describe the bug

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

OS: Windows 10
Browser Chrome and Firefox
Version 71.0.3578.98 and 63.0.3

Share Improve this question edited Dec 31, 2018 at 15:27 asked Dec 31, 2018 at 2:17 Marty McGee 1711 silver badge8 bronze badges

1 The input has type "text" but the attribute is type "number". Does changing the input type to number make any difference? – Alvaro Commented Dec 31, 2018 at 3:17
Thanks Alvaro, but no, changing it to a type=number only changes the input field's type..it still remains un-editable. – Marty McGee Commented Dec 31, 2018 at 14:28
1 Ok, I think Im seeing the issue. Inside onChangeBorderWidth function you are changing the color rather than the borderWidth attribute. Please let me know if this solves the problem. – Alvaro Commented Dec 31, 2018 at 14:44
Thanks again Alvaro! However, this was a separate mistake in my code, haha. I have updated that variable assignment (and updated this question), but errors still persist and input fields remain uneditable. Having said that, Chrome finally throws an error (Firefox does not), which points me in a new direction (head scratching).. When I try to edit a field, Chrome now says: The specified value "[object Object]" is not a valid number. The value must match to the following regular expression.. It's like any time I edit the field, an [Object] is it's new value, not what I typed from keyboard. – Marty McGee Commented Dec 31, 2018 at 15:07
I'm guessing that my attribute "selector" and/or "source" need to somehow point to the input field. I don't know how to do that :) – Marty McGee Commented Dec 31, 2018 at 15:33

Add a comment |

1 Answer 1

Sorted by: Reset to default 4

It turns out that in order to get to the value of an input field, you must point to it in your callback function, like so...

const onChangeBorderWidth = newBorderWidth => {
    props.setAttributes( { borderWidth: newBorderWidth.target.value })
}

This grabs the event's input target value and assigns it to the correct attribute.

HINT: You don't have to do this with Gutenberg's TextControl component.. by default, it returns this event.target.value

Programmer puzzle solving

Wordpress Gutenberg blocks: Input fields are not editable

1 Answer 1

Articles related to this article

comment list (0)