CODEWITHSUNDEEP
javascriptreactjs
ErnieKev
ErnieKev

Reputation: 3041

React prevent form submission when enter is pressed inside input

React prevent form submission when enter is pressed

I have the following React Search Bar component where the parent container can call using

<SearchBar onInputChange={this.handleInputChange} />

Everytime the user changes the input, the parent container will be notified. This is why my search bar does not need any submit button.

However, I am finding that if I press enter inside my search bar, the whole page refreshes. And I dont want that.

I know if I have a button in the form, I could call event.preventDefault(). But in this case I have no button so I dont know what to do here

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

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

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

Upvotes: 79

Views: 118875

Answers (7)

jumping_monkey
jumping_monkey

Reputation: 7875

This works for me:

<form ...>
    {/* Prevent implicit submission of the form */}
    <button
        aria-hidden="true"
        className="hidden"
        disabled
        type="submit"
     ></button>

For those interested in the literature

TL;DR:

4.10.22.2 Implicit submission
A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

Upvotes: 3

Mahdi Afzal
Mahdi Afzal

Reputation: 847

prevent for Enter key for search input:

<input type="text" onKeyDown={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

Upvotes: 0

Stanislau Ladutska
Stanislau Ladutska

Reputation: 305

This works for me:

<Input
   ...
   onKeyDown={(e) => { e.key === 'Enter' && e.preventDefault() }}
/>

Upvotes: 9

eon
eon

Reputation: 1938

In a React component with a Search input field, nested in a larger (non-React OR React) form, this worked best for me across browsers:

<MyInputWidget
  label="Find"
  placeholder="Search..."
  onChange={this.search}
  onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
  value={this.state.searchText} />

(e)=>{e.target.keyCode === 13} (@DavidKamer's answer) is incorrect: You don't want the event.target. That's the input field. You want the event itself. And in React (specifically 16.8, at the moment), you want event.key (e.key, whatever you want to call it).

Upvotes: 48

Matteo Galli
Matteo Galli

Reputation: 727

The best way to prevent the ENTER, as suggested also by Eon is to add the following to your input element:

onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}

Upvotes: 13

David Kamer
David Kamer

Reputation: 2885

I'm not sure if this works for every situation, as when you press enter in a form's input field you will still trigger the onSubmit method, although the default submit won't occur. This means that you will still trigger your pseudo submit action that you've designed for your form. A one liner with ES6 that solves the problem specifically and entirely:

<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />

This solution should have 0 side effects and solves the problem directly.

Upvotes: 13

zerkms
zerkms

Reputation: 255155

You need to create a form handler that would prevent the default form action.

The simplest implementation would be:

<form onSubmit={e => { e.preventDefault(); }}>

But ideally you create a dedicated handler for that:

<form onSubmit={this.submitHandler}>

with the following implementation

submitHandler(e) {
    e.preventDefault();
}

Upvotes: 108

Related Questions