4

I know this question has been asked before, but I've tried all of solutions I could find, and after wasting days on this, I'm literally about cry. What am I doing wrong?

The input field remains readonly and onChange won't fire despite my varied and increasingly desperate attempts to coax it into behaving like the most basic of text input fields.

here's my code: 

import React, { Component, PropTypes } from 'react';

export default class Contact extends Component {

    constructor(props) {
        super(props);
        this.state = { name: '' };
        }

    handleChange(e) {
        this.setState ({ name: e.target.value });
    }

    render() {
        return (
          <div>
              <form>    
                  <input
                    type = "text"
                    value = { this.state.name } 
                    onChange = { this.handleChange.bind(this) }
                  />
              </form>
          </div>
        );
    }

}

EDIT: I just realized that it does work as expected as long as I add <Contact /> to a component that doesn't invoke componentDidMount(). It would be super helpful if someone could give a breakdown of why that would make input fields readonly, i.e. does invoking componentDidMount() somehow interfere with onChangeor setState?

EDIT 2: componentDidMount() only appeared to be the issue because the components where I invoked it were the ones that contained transitions/animations which I'd attempted to layer using z-index. It turns out that a negative z-index on a parent div can disable an input field by preventing you from being able to click into the text field, even if the input appears completely unobscured.

caitbun
  • 81
  • 1
  • 5
  • 1
    It works like a charm for me. Are there any errors in the console? – martriay Aug 24 '16 at 02:31
  • it looks ok in my device. i think you need to check console. – Rafi Ud Daula Refat Aug 24 '16 at 02:37
  • I'm not getting any errors in the console D,: I just realized that it works if I call from a module that doesn't have componentDidMount(). Does that somehow force input fields to be readonly? – caitbun Aug 24 '16 at 03:00
  • The input is a controlled component. Its value is changed by handleChange's setState call. – vijayst Aug 24 '16 at 03:04
  • componentDidMount in the parent container shouldn't have any effect: http://jsfiddle.net/sL9fo01m/1/ – inostia Aug 24 '16 at 04:04
  • I used the component as a standalone AND as an include in another, both worked. You sure it's not working and your style color is not "white" which would make you think it isn't working, but its. If you view "sourcecode" what's the value after inputing some info? – james emanon Aug 24 '16 at 05:17
  • @inostia - You're right! It wasn't componentDidMount. The issue must be tied in a different way to the components where I'm invoking componentDidMount. I'm doing some fairly complex animations/transitions, so that might be creating a conflict somehow... I will go investigate. Thank you so much; your fiddle was super helpful. – caitbun Aug 24 '16 at 23:43
  • @james emanon - I realized last night (to my relief and frustration) that it does work standalone or if I place it in certain components. In those instances, the "value" updates to reflect typed input when viewing from the inspector. The font color is not white, and I can see placeholder text when it's added. When it's not working, it's as if the input field is a background image. There's no way to interact with it. It's not clickable/editable, no cursor appears, and there's no way to input any text. – caitbun Aug 24 '16 at 23:44
  • I've had that same issue happen, but only when the component has control issues. controlled vs uncontrolled. https://facebook.github.io/react/docs/forms.html – james emanon Aug 25 '16 at 00:47
  • 1
    aarghghghghhhaheiajfeioejeai;eij!!! frak me gently with a chainsaw. it was a z-index thing. i hadn't even considered that the z-index of a parent div could do that to a form input. i'll update my question in case anyone else is losing sanity over the same issue. thank you everyone for taking time to help me with this. without your input, i'd still be searching for the error in all the wrong places. – caitbun Aug 25 '16 at 01:36

2 Answers2

10

To, fixed this you need to replace value as defaultValue so that you can change the value property of input field

import React, { Component, PropTypes } from 'react';

export default class Contact extends Component {

constructor(props) {
    super(props);
    this.state = { name: '' };
    }

handleChange(e) {
 console.log(e.target.value); // make sure you are receiving the the value   
 this.setState ({ name: e.target.value });
}

render() {
    return (
      <div>
          <form>    
              <input
                type = "text"
                defaultValue = { this.state.name } // here write defaultValue instead of value
                onChange = { this.handleChange.bind(this) }
              />
          </form>
      </div>
    );
  }
}
Md.Estiak Ahmmed
  • 1,553
  • 9
  • 14
  • Thank you for the response! Even though defaultValue wasn't the root of my issue, I know this will likely help someone else! :) – caitbun Aug 25 '16 at 03:59
  • Thank you. Your answer really helped me. I couldn't figure out why I'm unable to update my form. – Bhatiya J Apr 15 '20 at 14:12
  • Whenever I typed anything in the field, the input field was not updated but I can console it. This solved the issue – melvin Jun 02 '21 at 13:29
4

The z-index of parent divs can make input fields appear readonly by making it impossible for you to click into the field. This can happen even if the field appears completely unobscured. http://jsfiddle.net/t8542vcy/2/

In my code, a very distant parent div had a negative z-index, causing the input to silent fail. It functioned normally once I adjusted the z-index. http://jsfiddle.net/t8542vcy/5/

I had no idea that z-index could cause this and wasted SO much time writing and rewriting my code because I incorrectly thought it was a React issue. I shed literal tears and nearly lost the last shreds of my sanity. I can only hope that this helps someone tormented by a similar demon.

Check your z-index, folks, check your z-index.

caitbun
  • 81
  • 1
  • 5