vmitsaras/js-offcanvas

Auto closes when textbox in offcanvas panel on android

CodeZone8 opened this issue · 1 comments

When a textbox is inside of the offcanvas panel the offcanvas panel closes because on the android it auto loads the keyboard screen. I do not see a workaround for this.

You can disable this:

// Olny for one Panel
$('.js-our-element').offcanvas({
  //other options
    resize: false
});
// Disable close-on-resize for all instances

// Global Options
window.componentNamespace.Offcanvas.prototype.defaults.resize = false

// Olny if Panel has <input>/<textarea>
 $( document ).bind( "beforecreate.offcanvas", function( e ){
    var $offcanvas = $( e.target ),
        api = $offcanvas.data('offcanvas-component');

    function onFocusIn() {
      console.log('onFocusIn');
      api.options.resize = false;
       $(window).off('resize.offcanvas orientationchange.offcanvas');
    }    

    function onFocusOut() {
      console.log('onFocusOut');
      api.options.resize = true;
      api.resize();
    }

    $offcanvas.on('focusin', 'input,textarea', onFocusIn)
              .on('focusout', 'input,textarea', onFocusOut);
 }); 

Codepen updated: https://codepen.io/vmitsaras/pen/gwGwJE