CODEWITHSUNDEEP
javascriptreactjsreactstrap
Simas.B
Simas.B

Reputation: 754

Page navigates after enter key press on enter

We've got this weird situation where page refreshes enter key press, but not always. We've got a modal which contains text input. When you enter something into it and, with focus still on input, press enter, page navigates, i.e., we have url: domain/#/clientInfo after enter key press it becomes, domain/input.id=input.value#/clientInfo. I've logged submitMethods and all onClick methods, but none of them is invoked. I've tried adding:

onKeyPress={(e) => e.preventDefault()

on Input element and that stopped navigation. My question is how can i further debug whats causing this navigation event?

Edit:

Input element is inside form element. Submit method is not invoked, I've added logs to submit method, and used, developers console option to preserve log, and did not see any logs. However if I submit form via save button submit method is invoked, and it does not navigate to mystery page. One more thing, when you navigate to other page via enter press, and end up with, domain/input.id=input.value, then try the same steps for the second time, but the value you enter into input is the same as previous, navigation does not happen.

Upvotes: 0

Views: 1931

Answers (1)

beniutek
beniutek

Reputation: 1767

So I suspect that your form element should look like that (in a very very basic way)

export default class FooForm extends Component {
  constructor(props) {
    super(props);
    this.state = { inputValue = this.props.fooValue };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.FooAction(event);
  }

  onInputChange = (event) => this.setState(() => ({ inputValue: event.target.value }))
  render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input value={ this.state.inputValue } onChange={ this.onInputChange } />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

this way when you submit a form it doesn't do any default actions that are form specific and let's you just do what you explicitly tell it to do

Upvotes: 0

Related Questions