CODEWITHSUNDEEP
javascriptreactjshotkeysinput-fieldmousetrap
R. Kohlisch
R. Kohlisch

Reputation: 2993

Focusing input field with Mousetrap.js - but input field also pastes the hotkey as value?

Have a look at the following example. I have enhanced the official example here with some Mousetrap functionality. So whenever somebody presses alt+1, the first input field will focus, whenever somebody presses alt+2 the second input field will be focused. It works.

Problem: However, the input field then also takes the value of whatever was pressed as the hotkey (alt+1 then renders to ¡, alt+2 renders to € in the input). But I just want this to be a hotkey, I don't want it's actual value in the input field. How do I do this?

I could clear / delete the input field completely. This would work in the example here, but I don't want to do it since in my final app the state of the input field will need to be preserved, so I cannot just delete it.

Any advice?

import React from "react"
import Mousetrap from "mousetrap"

export default class CustomTextInput extends React.Component {
  constructor(props) {
    super(props)
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef()
    this.textInput2 = React.createRef()
    this.focusTextInput = this.focusTextInput.bind(this)
  }

  componentDidMount() {
    Mousetrap.bind("alt+1", () => {
      this.focusTextInput(1)
    })

    Mousetrap.bind("alt+2", () => {
      this.focusTextInput(2)
    })
  }

  focusTextInput(id) {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    if (id === 1) {
      this.textInput.current.focus()
    }
    if (id === 2) {
      this.textInput2.current.focus()
    }
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input type="text" ref={this.textInput} className="mousetrap" />
        <input type="text" ref={this.textInput2} className="mousetrap" />
      </div>
    )
  }
}

I

Upvotes: 1

Views: 413

Answers (2)

FallenAngelBG
FallenAngelBG

Reputation: 31

@Dhananjai Pai solution didn't worked for me in the same case.

I know this is very old question, so I will just leave the solution, that worked for me, just if someone needs it.

<input
    type="text"
    placeholder="Put focus here"
    name="something"
    id="order-code"
    class="form-control barcodeScanner"
>

if (typeof Mousetrap !== 'undefined') {
    Mousetrap.bind(['`', '('], function (e) {
        e.preventDefault();
        $('.barcodeScanner').focus()
    }, 'keyup');
}

Adding as third option the 'keyup' event solved the issue with typing inside the input. Source: https://craig.is/killing/mice#api.bind

There is a third argument you can use to specify the type of event to listen for. It can be keypress, keydown or keyup.

It is recommended that you leave this argument out if you are unsure. Mousetrap will look at the keys you are binding and determine whether it should default to keypress or keydown.

Upvotes: 1

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

have you tried event.preventDefault() ? 

Mousetrap.bind("alt+1", (e) => {
            e.preventDefault();
      this.focusTextInput(1);
    })

    Mousetrap.bind("alt+2", () => {
        e.preventDefault();
    this.focusTextInput(2)
    })

Upvotes: 2

Related Questions