CODEWITHSUNDEEP
javascriptreactjs
Pdavis33
Pdavis33

Reputation: 49

react-hotkeys cntrl+s while focus is in textarea

I am trying to be able to use cntrl+s while focus within a textarea using react-hotkeys.

this.keyMap = {
        KEY: "ctrl+s"
      };
  
      this.handlers = {
        KEY: (e) => {
            e.preventDefault();
            this.saveBtn(c);
        }
      };


<HotKeys keyMap={this.keyMap} handlers={this.handlers}>
   <textarea/>
 </HotKeys>

Upvotes: 1

Views: 1563

Answers (2)

anshuVersatile
anshuVersatile

Reputation: 2068

Following is not solution it's work around but it fulfills the requirement...

[Please Note] Basically I have restricted access to Ctrl key in browser and then it works fine though.

import { HotKeys } from 'react-hotkeys';

import React, { PureComponent, Component } from 'react';
import { configure } from 'react-hotkeys';


const COLORS = ['green', 'purple', 'orange', 'grey', 'pink'];

const ACTION_KEY_MAP = {
  KEY: 'Control+s',
};

class Login extends Component {
  constructor(props, context) {
    super(props, context);

    this.changeColor = this.changeColor.bind(this);
    configure({
      ignoreTags: ['div']
    });
  
    this.state = {
      colorNumber: 0
    };
  }

  changeColor(e) {
    e.preventDefault();
    this.setState(({ colorNumber }) => ({ colorNumber: colorNumber === COLORS.length - 1 ? 0 : colorNumber + 1 }));
  }

  KeyDown(e){
    if(e.ctrlKey) e.preventDefault();
  }
  render() {
    const handlers = {
      KEY: this.changeColor
    };

    const { colorNumber } = this.state;
    const style = {
      width: 200,
      height: 60,
      left: 20,
      top: 20,
      opacity: 1,
      background: COLORS[colorNumber],
    };

    return (

      <HotKeys
        keyMap={ACTION_KEY_MAP}
        handlers={handlers}        
      >
          <textarea 
            style={style}
            className="node"
            tabIndex="0"
            onKeyDown={this.KeyDown}
          ></textarea>
       
      </HotKeys>


    );
  }
}

export default Login;

Upvotes: 0

sit
sit

Reputation: 360

  1. You need to use Control+s, not ctrl+s.
  2. You need to call configure like that so it won't ignore textareas: 
    import { configure } from "react-hotkeys";
configure({
    ignoreTags: []
});

Upvotes: 4

Related Questions