3

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
    The input has type "text" but the attribute is type "number". Does changing the input type to number make any difference? – Alvaro Dec 31 '18 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 Dec 31 '18 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 Dec 31 '18 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 Dec 31 '18 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 Dec 31 '18 at 15:33
2

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.