Extension AltKeysPopup keys conflict

[progtarek]

I am using altkeyspopup extension for adding special and extra characters, but it seems that when I choose one of the characters from popup keyboard, I noticed that the input has two values the special character that I choose and another one from the layout that I made, so instead of choosing one character from the popup keyboard it picks two characters one from the popup keyboard and the other that was beneath the one was in the popup keyboard, here is my configuration:

    $('.address-input').keyboard({
      language: ['en'],
      rtl: false,
      layout: 'custom',
      customLayout: {
        'normal': [
          '1 2 3 4 5 6 7 8 9 0 {b}',
          'q w e r t y u i o p {clear}',
          'a s d f g h j k l - {shift}',
          'z x c v b n m ` / \' {enter}',
          '{space}'
        ],
        'shift': [
          '1 2 3 4 5 6 7 8 9 0 {b}',
          'Q W E R T Y U I O P {clear}',
          'A S D F G H J K L - {shift}',
          'Z X C V B N M ` / \' {enter}',
          '  {space}'
        ]
      },
      position: false,
      reposition: false,
      usePreview: false,
      display: {
        'b': '\u27f5',
        'clear': '\u21E4',
        'enter': '\u21a9',
        'shift': '\u21ea',
        'space': '\u00a0',
      },
      wheelMessage: 'Use mousewheel to see other keys',
      css: {
        input: 'ui-widget-content ui-corner-all',
        container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
        popup: '',
        buttonDefault: 'ui-state-default ui-corner-all',
        buttonHover: 'ui-state-hover',
        buttonAction: 'ui-state-active',
        buttonActive: 'ui-state-active',
        buttonDisabled: 'ui-state-disabled',
        buttonEmpty: 'ui-keyboard-empty'
      },
      lockInput: false,
      restrictInput: false,
      restrictInclude: '',
      enterMod: 'altKey',
      stopAtEnd: true,
      appendLocally: false,
      stickyShift: true,
      preventPaste: false,
      caretToEnd: true,
      scrollAdjustment: 10,
      maxLength: false,
      maxInsert: true,
      repeatDelay: 500,
      repeatRate: 20,
      resetDefault: false,
      openOn: 'focus',
      keyBinding: 'mousedown touchstart',
      useWheel: true,
      useCombos: false,
      initialized: function (e, keyboard, el) { },
      beforeVisible: function (e, keyboard, el) { keyboard.options.acceptValid = true; },
      visible: function (e, keyboard, el) {
        if ($.keyboard.caret(keyboard.$preview).start === 0) {
          keyboard.showKeySet('shift');
        }
      },
      beforeInsert: function (e, keyboard, el, textToAdd) {
        return textToAdd;
      },
      change: function (e, keyboard, el) {
        setTimeout(function () {
          const caret = $.keyboard.caret(keyboard.$preview),
            end = caret.end - 2 >= 0 ? caret.end - 2 : caret.end;
          const str = keyboard.$preview.val().substring(end, caret.end);
          if (!/shift|lock/i.test(keyboard.last.key)) {
            keyboard.shiftActive = (caret.start === 0 || str.indexOf('. ') >= 0);
            keyboard.showKeySet();
          }
        }, 120);
      },
      switchInput: (keyboard, goToNext, isAccepted) => {
        keyboard.close(isAccepted);
        const all = $('.ui-keyboard-input:not(.ui-keyboard-preview)');
        let indx = all.index(keyboard.$el) + (goToNext ? 1 : -1);
        if (indx > all.length - 1) {
          indx = 0;
        }
        if (indx === 0 && this.input.address && this.input.town && this.input.country) {
          this.onSubmit();
        } else {
          all.eq(indx).focus();
        }
      },
      alwaysOpen: false,
      initialFocus: false,
      noFocus: false,
      stayOpen: true,
      userClosed: false,
      ignoreEsc: true,
      appendTo: '.keyboard-container',
      cancelClose: false,
      tabNavigation: false,
      enterNavigation: true,
      autoAccept: true,
      autoAcceptOnEsc: false,
      acceptValid: false,
      autoAcceptOnValid: false,
      validate: (keyboard, value, isClosing) => {
        this.idle.watch();
        const inputId = keyboard.$el[0].id;
        if (inputId === this.addressElementRef.nativeElement.id) {
          this.addressElementRef.nativeElement.value = value;
          const e = document.createEvent('HTMLEvents');
          e.initEvent('focus', false, true);
          this.addressElementRef.nativeElement.dispatchEvent(e);
        }
        this.addressForm.get(inputId).setValue(value, {
          emitEvent: false
        })
        this.input[inputId] = value;
        this.storageDriver.set(this.input);
        if (inputId === 'eircode') {
          this.checkFormValidity(value);
        }

        return true;
      }
    }).addAltKeyPopup({
      holdTime: 200,
      popupVisible: 'popup-visible'
    });

[Mottie]

Hi @progtarek!

I'm not sure what you mean by it duplicating the special characters. I set up this demo and I do not see two characters inserted when I select an alt key; nor do I see duplicate symbols within the popup.

If you take a look at the alt-key extension source, you'll see that all of the alt key definitions are stored in $.keyboard.altKeys. In the alt-key demo, that variable is extended ($.extend()) to add more. If you want to replace or remove any definitions you'll need to alter the $.keyboard.altKeys value.

[progtarek]

Hi @Mottie, thanks for reply
it doesn't duplicate the special character it choose the special character and the ordinary character that was beneath it, I solved this issue by disabling pointer events to the original keyboard when the pop-up keyboard is visible,
the second thing I noticed that:

    $.keyboard.keyaction.enter = (base) => {
      console.log('ENTER KEY');
    };

that enter key will be fired for all the keyboards
what if i want to set custom "ENTER" action key for each keyboard

[Mottie]

disabling pointer events to the original keyboard

Good idea! 😸

what if i want to set custom "ENTER" action key for each keyboard

Action keys use a global definition in $.keyboard.keyaction to maintain consistency across keyboards. If you want a custom enter, you could modify the action to check the id of the keyboard base.el.id and perform a specific action, or define a custom enter action (e.g. enter1, enter2, ...) for each keyboard with a custom layout, which is a lot more work.

[Mottie]

I've updated the altKey extension in v1.28.0.

[progtarek]

hi @Mottie,
it works perfectly after update to v1.28.0. thanks for sharing.

[dlinch]

Hello, I ran into this problem and updating to 1.28.0 fixed it for me as well. Thanks @Mottie!

One side note: when I use the keyboard to add text now it counts each keystroke as a long press and activates the popup. Is there someway to fix this as well? I attached a gif of me typing vowels and showing it in action. It's not a huge deal, but it will definitely slow us down in development when we're testing input values.

[Mottie]

Hi @dlinch!

The altKeyPopup includes a holdTime option that can be modified; default is 500 (milliseconds).

[dlinch]

@Mottie Yeah, but I'm saying that a quick press from the keyboard triggers it. I set holdTIme to 1000 milliseconds to test that I wasn't holding the key too long, it's definitely being triggered from keypress on my keyboard regardless of how long I hold the key.

[Mottie]

I'm not able to duplicate the problem. Are you using the most recent versions? And which browser/OS are you seeing this problem? Are you seeing the problem in other browsers?

[dlinch]

I upgraded to 1.28 today because of this thread. On Chrome 65 on OSX 10.13.3.
We only support Chrome so other browsers are irrelevant.

Just to eliminate any potential for miscommunication I want to be explicit when I say that a physical key press from my laptops keyboard is what is triggering the long press event to fire on the virtual keyboard. If you want to move this to a separate issue I can do that as well, just let me know.

[Mottie]

Hmm, can you duplicate the issue in this demo?

[dlinch]

Hmmm... I can't. I guess that's good, we might be able to hunt down what we're setting in our config that might trigger that event. Thanks!

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.