CODEWITHSUNDEEP
reactjsreact-router-v4mousetrap
yak
yak

Reputation: 340

Keep Mousetrap Shortcut out of autoFocused Input when changing Route

I have a route which leads to a page with an input I want focused.

Using a Mousetrap shortcut to get there, puts the shortcut key into the input.

For example, a Shortcut "a" for appointments, renders the page with an "a" in the input field

is there a way i can prevent this?

I get this both with:

<input autoFocus />

and using a ref and focusing on didMount

componentDidMount() {
    this.input.focus();
}
render() {
    return <input ref={input => (this.input = input)} />;
}

here is a code sandbox showing both shortcuts (a/r)

https://codesandbox.io/s/0oll7jmxqn

help! Thanks

Upvotes: 0

Views: 63

Answers (1)

yak
yak

Reputation: 340

found the answer from

Prevent keypress to bubble to input in mousetrap

It is as simple as 

return false;

Upvotes: 0

Related Questions