JSFiddle - React, Tailwind, and code Playground

by joplomacedo

JavaScript

let mode = 'selectOption';

const handleKeydownKeyMapByModes = {
    searchText: {
      Enter(e) {
        console.log('Enter');
      },
      Backspace(e) {
        console.log('Backspace');
      }
    },

    selectOption: {
      Enter,Tab(e) {
        console.log('Enter');
      },

      Comma(e) {
        console.log('Comma');
      },

      ArrowDown(e) {
        console.log('ArrowDown');
      },

      ArrowUp(e) {
        console.log('ArrowUp');
      },

      Space(e) {
        console.log('Space');
      },

      Backspace(e) {
        console.log('Backspace');
      }
    }
  };


function handleFieldKeydown(e) {
    const currentModeKeydownKeyMap = handleKeydownKeyMapByModes[mode];

    if (currentModeKeydownKeyMap) {
    
      const key = Object.keys(currentModeKeydownKeyMap).find(key => {
        const keys = key.split(",").map(item => item.trim());
        return keys.includes(e.code);
      });

      if ( key ) {
      	const cb = currentModeKeydownKeyMap[key];
        cb(e);
      }
    }
  }
  
  
  window.addEventListener('keydown', e => {
  	document.body.innerText = e.code;
  	handleFieldKeydown(e)
  });