With two key navigations on one screen, the key highlighting is lost.

[bluelemonade]

I'm trying to operate 2 keyboards with key navigation on one screen. Everything works, can output text in two different input fields, but unfortunately I can't see the selected key. As soon as I rename the class for the div, the highlight disappears.

How can I pass it on to the keyboard navigation.

<template>

  <div id="focus" class="w-1/2">
    <div class="simple-keyboardA"></div>
  </div>

</template>



<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";
import SimpleKeyboardLayouts from "simple-keyboard-layouts";
import keyNavigation from "simple-keyboard-key-navigation";
/* eslint-disable */
// import keyNavigation from "../js-keyboard/index.js";

const layouts = new SimpleKeyboardLayouts().get();

export default {
  
  name: "SimpleKeyboard",

  props: {
    
    input: {
      type: String
    }
  },

  data: () => ({
    keyboard: null,
    activeLanguage: "deutsch",
    passiveLanguage: "english",
    // layout: german,
  }),
  
  mounted() {
    this.createKeyboard();
    // document.getElementById('focus').focus();
    document.addEventListener( "keydown", e => {
      if (e.key === "y") this.keyboard.modules.keyNavigation.up();
      else if (e.key === "x") this.keyboard.modules.keyNavigation.down();
      else if (e.key === "a") this.keyboard.modules.keyNavigation.left();
      else if (e.key === "s") this.keyboard.modules.keyNavigation.right();
      else if (e.key === "d") this.keyboard.modules.keyNavigation.press();
      },
      false
    );
  },
  
  methods: {

    createKeyboard() {
      this.keyboard = new Keyboard(".simple-keyboardA", {
        onChange: this.onChange,
        onKeyPress: this.onKeyPress,
        ...layouts.german,
        mergeDisplay: true,
        useMouseEvents: true,
        enableKeyNavigation: true,
        modules: [
          keyNavigation
        ],
        layout: {
          default: [
            "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
            "{tab} q w e r t y u i o p",
            "{lock} a s d f g h j k l{enter}",
            "{shift} z x c v b n m {shift}",
            "@ {space}"
          ],
          shift: [
            "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
            "{tab} Q W E R T Y U I O P { } |",
            '{lock} A S D F G H J K L {enter}',
            "{shift} Z X C V B N M {shift}",
            "@ {space}"
          ]
        },
        
      });

      this.setKeyboardInput(this.input);
    },

    onChange(input) {
      this.$emit("onChange", input);
      // document.querySelector(".input").value = input;
      this.$emit("onChange", input);
      console.log("Input changed", input);
    },

    onKeyPress(button) {
      console.log("Button pressed", button);
      this.$emit("onKeyPress", button);

      if (button === "{shift}" || button === "{lock}") {
        this.handleShift();
      }
    },

    handleShift() {
      const currentLayout = this.keyboard.options.layoutName;
      const shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle,
      });
    },

    setKeyboardInput(input) {
      this.keyboard.setInput(input);
    },

    hideKeyboard() {
      this.$emit("closeKeyboard");
    },

    checkkey(e) {
      console.log(e);
      if (e.key === "y") keyboard.modules.keyNavigation.up();
      else if (e.key === "x") keyboard.modules.keyNavigation.down();
      else if (e.key === "a") keyboard.modules.keyNavigation.left();
      else if (e.key === "s") keyboard.modules.keyNavigation.right();
      else if (e.key === "d") keyboard.modules.keyNavigation.press();
    }
  },
  watch: {
    input(input) {
      this.setKeyboardInput(input);
    },
  },
};
</script>



<style scoped>
button {
  background-color: tomato;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 0.5em;
  cursor: pointer;
}
</style>



<style>
/*
  Theme: myTheme1
*/
.simple-keyboardB.myTheme1 {
  background-color: rgba(255, 0, 0, 0);
  border-radius: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.hg-button.hg-standardBtn.buttonClass1 {
  background: rgb(255, 0, 0, 0.8);
  color: white;
}

.hg-button.hg-standardBtn.buttonClass2 {
  box-shadow: 0px 0px 40px 5px rgba(255, 255, 0, 1.0);
  z-index: 1;
}

</style>

[hodgef]

Hello @bluelemonade,

I started looking into this, but I am spending too much time trying to set up a sandbox, because you have not provided a full repro. I realize I told you about this in a previous ticket: #2402 (comment)

Please make my life easier by providing a sandbox repro or a test git repository with your full runnable code.

Thanks,
Francisco Hodge