Interaction issue with Fancybox 3

[jmdcode]

With Fancybox 3 (3.5.7) loaded, clicking the Enter or Cancel button on the keyboard object produces an: "Uncaught TypeError: Cannot read property 'hash' of undefined" from jquery.fancybox.min.js. If I don't load Fancybox, no error.

I don't see how Fancybox is involved, as it is only called on a specific (not related to keyboard) button click.

Keyboard code:

        //initialize the numeric keypad
        $('#numKeyPad').keyboard({
               layout: 'custom',
                customLayout: {
                    'default': ['1 2 3', '4 5 6', '7 8 9', '0 . {clear}','{accept} {cancel}']
                },
                display: {
                  'accept' : 'Enter:Accept the Content'
                },
                alwaysOpen: false,
                lockInput: true,
                accepted : function(event, keyboard, el) {
                      //get the subCap that called from stored attribute
                      var subCapVal = $('#numKeyPad').attr('data-subcap');
                      //get the value returned from KeyPad
                      var returnValue = el.value;
                      //set to entered value or 0, if null
                      returnValue = returnValue > 0 ? returnValue : 0;
                      console.log("value for SubCap"+subCapVal+" entered is "+returnValue);
                      //set the slider value
                      $('#sliderSubCap'+subCapVal).val(returnValue);
                      //refresh the slider
                      $('#sliderSubCap'+subCapVal).rangeslider('update',true);
                      //set the subCaption value in sessionStorage
                      sessionStorage.setItem('subCaption'+subCapVal+'Value', returnValue);
                      //update the ranking list
                      updateRankList(subCapVal);
                    },
                    canceled : function(event, keyboard, el) {
                      console.log('keyboard was cancelled');
                }

        }); //#numKeyPad.keyboard

        //on the Pad button click  
        $('.btnSubCapNumPad').click(function(){
            //get the subCaption number       
            var subCap = $(this).attr('data-subcap');
            console.log("numPad for subCap "+subCap+" has been touched");
            //set the numPad's subCap and clear
            $('#numKeyPad').attr('data-subcap', subCap).val('');
            //get the object and show it 
            $('#numKeyPad').getkeyboard().reveal();

            $('.ui-keyboard-accept').addClass('button-primary');
        });

Any help/ideas will be greatly appreciated.

-john

[Mottie]

Hi @jmdcode!

I've a similar report when users use bootstrap modals, so it may be related. Try changing some of the default keyboard triggered events. The bootstrap issue was due to the "hidden" event being triggered. I haven't time to test this library with Fancybox.

[super350pilot]

I had the same problem while using Fancybox 3.5.7. Following the advice to change the triggered events worked. The conflict is with the kbBeforeClose event. I changed the value for kbBeforeClose to beforeClose1 and everything is working now.