Usability problem when showing/hiding keyboard with button

[aztechowski]

I have two keyboards bind to the same search field. Keyboards are open by clicking on link. The keyboard has to be closed if user clicks outside of keyboard and/or accept button or clicks again on the link. My problem is that clicking on the link sometimes causes thath keyboard is flickering instead of beeing hidden.
Please run following fiddle on Chrome and click on keyboard A link, then click outside to hide keyboard and then click again link A. Keyboard doesn't appear.
See the code https://jsfiddle.net/aztechowski/1hwwstyt/8/.

I think the reason is that at the end of destroy method method init() is called. This caused that keyboard id recreated even I call the destroy method. I was expecting that $('#searchField').getkeyboard() will return me "undefined" after destroy but due to initialziation it returns object.

P.S. Similar behaviour you can see for example "international" from here: http://mottie.github.io/Keyboard/index.html.

[Mottie]

Hi @AZtech!

Hmm, I was not able to duplicate the issue in Chrome, but I think it would be better to change the layout instead of destroying the keyboard instance every time. See if the issue continues with this code (demo):

$.keyboard.layouts.custom1 = {
    'default': [
        '{accept}',
        'a b c d e f g'
    ]
};
$.keyboard.layouts.custom2 = {
    'default': [
        '{accept}',
        '1 2 3 4 5 6 7'
    ]
};

$('#searchField').keyboard({
    openOn: null,
    stayOpen: false,
    alwaysOpen: false,
    autoAccept: true,
    appendTo: '#ds-keyboard-container #keyboard-a-container',
    usePreview: false,
    initialFocus: true,
    layout: 'custom1',
    display: {
        'accept': '×',
        'intro': 'klawiatura znaków specjalnych',
        'lock': 'Caps lock'
    },
});

// specjalna klawiatura ekranowa / klawiatura ekranowa
$('#keyboard-a, #keyboard-b').click(function () {
    var kb = $('#searchField').getkeyboard();
    // change layout based on link ID
    kb.options.layout = this.id === 'keyboard-a' ? 'custom1' : 'custom2';
    kb.reveal();
});

[aztechowski]

First of all thanks for hint. The solution with switching layouts it something what I was looking for to simplify JS code :)
Unfortunately there is still one issue. If you click on link and keyboard is open I would like to hide it. Now is flickering.

[Mottie]

Instead of unbinding the links, I think maybe the next easiest thing to do would be to add an overlay. In the demo I made the overlay background darker, but it can be transparent as well.

CSS

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 100;
}

Script (snippet to add)

visible: function(){
    $('<div class="overlay"/>')
        .click(function(){
            $(this).remove();
            return false;
        })
        .appendTo('#ds-keyboard-container');
}

[aztechowski]

Thanks! It's much better! It still has one drawback but it is better than flickering keyboard.
The drawback is following: if you click on the second keyboard icon and keyboard is open you are expecting that the second keyboard will appear. With overlay you need to click twice.
From usability point of view this is not the best but still better that previous behavior.
I'm wandering if there is any other possibility. Maybe it can be done with destroying the keyboard every click and checking if keyboard is in initial state. But this will require to add new variable to JS code isInit which will be set once the init() method is called.

[Mottie]

Hmm, ok, I'll see what I can do...

[Mottie]

Ok, try this (demo):

// specjalna klawiatura ekranowa / klawiatura ekranowa
$('#keyboard-a, #keyboard-b').click(function () {
    var kb = $('#searchField').getkeyboard();
    // change layout based on link ID
    kb.options.layout = this.id === 'keyboard-a' ? 'custom1' : 'custom2';
    // open keyboard if layout is different, or time from it last closing is > 200 ms
    if (kb.last.layout !== kb.options.layout || (new Date().getTime() - kb.last.eventTime) > 200) {
        kb.reveal();
    }
});

Basically, I added code to include:

• keyboard.last.layout which contains the layout used by the closed keyboard.
• keyboard.last.eventTime is now updated upon keyboard closing. So if you compare this last event time to the current time, you can allow clicks to reveal the keyboard even if the same layout was previously used.

This update is available in the master branch; I haven't made a release version yet.

[aztechowski]

Work perfect! Thank you!