React Input Component is not editable

The problem: my <input> is not editable. I am using React with Next, have a simple login form with just one <input> element of type=”email”, which has been working fine until I moved it to a modal window.

So, in order to not trigger the “potential duplicate to…”, let me summarize what I’ve tried so far:

Verified that I have the correct casing for my onChange event handler.
Also researched the topic on dealing with z-index on components using it, but it mentions issues with negative z-index, and nothing about positive values.
Have looked into 15+ topics on SO for this exact problem — most of them were focusing on proper casing for the onChange event handler or trying to use defaultValue in place of value.

Damn, I think I have tried everything I could find on SO, but am still stuck at the issue of not being able to feed any input from my keyboard (however, all of my autocomplete options make their way into the input field and do trigger the handler).

Here is the simplified code for my “problem” component (removed styling and unnecessary code):

import React from "react";

class Login extends React.Component {

state = {login: ""}

  constructor() {
    super();
    this.handleLoginType = this.handleLoginType.bind(this);
  }

  handleLoginType(event) {
    this.setState({ login: event.target.value });
  }

  handleSubmit(event) {
    // handle submit routine
  }

  render() {
    return (
      <Aux>
       <div id="backdrop"></div>
       <div id="loginForm">
          <article>
           <p>Access your account</p>
           <div>
              <form onSubmit={this.handleSubmit} encType="multipart/form-data">
                   <input onChange={this.handleLoginType} 
                          name="login"
                          id="loginEmail"
                          type="email"
                          value={this.state.login}
                    />
                   <button type="submit">Log in</button>
              </form>
          </article>
        </div>
      </Aux>
    );
  }
}

export default Login;

This component has a CSS style that has z-index of 100, and the backdrop has z-index set to 50.

Added CodeSandBox Example: https://codesandbox.io/s/keen-ellis-bjh8f?file=/src/App.js

Answer

check the updated code here which is working – http://codesandbox.io/s/mystifying-lovelace-mcdqz

In the app.js, you added a event listener, where you are preventing the default behaviour, comment line no 31(event.preventDefault();) in app.js and try

As you added the keypressed event to the document and preventing the default behaviour keypressed, input onchange event is not getting triggered. check event phases here – https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase

Advertisement

Answer