WordPress Gutenberg blocks: Input fields are not editable

by

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

1 Answer
1

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

Leave a Comment