Bootstrap-Offcanvas
Bootstrap-Offcanvas copied to clipboard
The offcanvas menu automatically closes when the input is clicked in mobile
The offcanvas menu automatically closes when the input is clicked in mobile.when I click in input(in mobile),it trigger window resize and it close the menu .can you add option in tag (like data-recalc='true') and closing menu in resize when option recalc is true or false. thank you
I have the same issue too.
I have too. It seems a resize event occurred when you clicked input on mobile device because of virtual keyboard. When resize event occurred, the opened menu closed automatically by purpose. If you do not want this, you can comment resize event handler in source code, i think.
The resize event seems to be triggered on Android (not on iOS). A temporary fix would be to add an extra check in the resize handler.
$(window).on('resize', function() {
if($(document.activeElement).attr('type') !== 'text') {
$('.navbar-offcanvas.in').each(function() {
return $(this).height('').removeClass('in');
});
return $('.offcanvas-toggle').removeClass('is-open');
}
});
I've same issue... my workaround is
$('#navbar a').on('click', (e) => {
$('.navbar-offcanvas.in').height('').removeClass('in')
$('.offcanvas-toggle').removeClass('is-open')
})
$(window).on('resize', function (ev) { ev.preventBubble(); });
worked for me, you might want to customize that so it doesn't prevent bubbling on all resize events.
Thanks @smokie it worked for me