ハンバーガーメニュー内の検索フォームをクリックするとハンバーガーメニューが閉じてしまう

Question

【現状】
ハンバーガーメニュー内の検索フォームをクリックするとハンバーガーメニューが閉じてしまい、フォーム内のテキスト入力ができません。

【やりたい事】
ハンバーガーメニュー内の検索フォームをクリックしてテキスト入力を可能にしたいです。

【対象のウェブサイト】
https://himi-biz.net/

【デバイス】
iPhone11

JS初心者です。
もしよろしければ、よろしくお願いいたします。

<div class="drawer-overlay"></div>
			<div class="drawer-navigation">
				<div class="drawer-navigation-content">
				<?php businesspress_main_navigation(); ?>
				<?php if ( get_theme_mod( 'businesspress_enable_top_bar' ) ) : ?>
				<?php businesspress_header_social_link(); ?>
				<?php endif; ?>
				<div class="nav-contact for-sp">
					<span><a href="https://himi-biz.net/contact/">ご予約・お問い合わせ</a></span>
					<span id="search-box">
						<form method="get" action="<?php bloginfo( 'url' ); ?>" class="search_container">
							<input name="s" id="s" type="text" size="25" placeholder="サイト内を検索" />
							<input id="submit" type="submit" value="&#xf002" />
						</form>
					</span>
					<ul>
					<li class="nav-sns"><a href="https://www.facebook.com/himimachi/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/snsbutton-facebook.png" srcset="<?php echo get_template_directory_uri(); ?>/images/snsbutton-facebook.png 1x,
             <?php echo get_template_directory_uri(); ?>/images/[e-mail] 2x"></a></li>
					<!-- <li class="nav-sns"><a href="https://www.instagram.com/himi.machi/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/snsbutton-instagram.png" srcset="<?php echo get_template_directory_uri(); ?>/images/snsbutton-instagram.png 1x,
             <?php echo get_template_directory_uri(); ?>/images/[e-mail] 2x"></a></li> -->
				</ul>
				</div>
				</div><!-- .drawer-navigation-content -->
			</div><!-- .drawer-navigation -->

( function( $ ) {
	"use strict";

	// Set Fixed Header
	var $cloneHeader = $('.main-header').clone().removeClass('main-header-original').addClass('main-header-clone').appendTo('body');
	$(window).on('load scroll', function() {
		var value = $(this).scrollTop();
		if ( value > 300 ) {
			$cloneHeader.addClass('main-header-clone-show');
		} else {
			$cloneHeader.removeClass('main-header-clone-show');
			$('.main-header').removeClass('drawer-opened');
		}
	} );

	// Set Drawer Menu
	$('.drawer-hamburger').on('click', function() {
		$(this).parent().parent().toggleClass('drawer-opened');
	} );
	$('.drawer-overlay').on('click',function() {
		$('.main-header').removeClass('drawer-opened');
	} );

	// Set Smooth Scroll
	$('a[href^=#]').click(function() {
		var headerHight = $('.main-header-clone').outerHeight()+45;
		var href = $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href);
		var position = target.offset().top-headerHight;
		$('html,body').animate({scrollTop:position}, 400, 'swing');
	} );

	// Set Back to Top
	$(function() {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
				$('.back-to-top').fadeIn();
			} else {
				$('.back-to-top').fadeOut();
			}
		});
		$('.back-to-top').click(function () {
			$('html,body').animate({scrollTop: 0}, 600, 'swing');
			return false;
		});
	});

	// Set Slick for Featured Posts.
	if( 1 < $('.slick-item').length ) {
		$('.featured-post').slick( {
			centerMode: true,
			centerPadding: '0',
			dots: true,
			mobileFirst: true,
			slidesToShow: 1,
		} );
	}

	// Set Stickyfill for Sticky Sidebar.
	var $sticky_sidebar = $('#sticky-sidebar');
	if( 0 < $sticky_sidebar.length ) {
		Stickyfill.add($sticky_sidebar);
	}

	// Set Fitvids
	$('.entry-content').fitVids();

} )( jQuery );

Answer 1

原因はこちらのコード(scrollの方)にありそうです。

$(window).on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 300 ) {
        $cloneHeader.addClass('main-header-clone-show');
    } else {
        $cloneHeader.removeClass('main-header-clone-show');
        $('.main-header').removeClass('drawer-opened');
    }
} );

確認してみて欲しいのですが、おそらくiPhoneでテキストボックスをタップした時、「テキストフォームが拡大されるような動き」をしませんか？原因はこの挙動にあります。

この挙動により、scrollイベントが発生します。よって上記の$(window).on('load scroll', ...)で指定している関数が実行されます。関数内部では、「300pxより小さい時」に$('.main-header').removeClass('drawer-opened');しているので、サイドメニューが閉じてしまうわけです。
実際、300pxよりも下にスクロールしていた状態だとこの挙動は確認されませんでした。

• サイドメニューが開いている時は閉じないようにする
• そもそもスクロールと連動してサイドメニューを閉じないようにする
• サイドメニュー内のテキストボックスにフォーカスが当たっている時だけ無効化する

などなど、多分対応方法は色々あると思います。ただ、みたところ、個人学習用というよりは業務での開発のようですので、仕様変更が許されるかなどの制約もあるかと思います。私の意見は参考程度でとどめて、チームのメンバーやクライアントの方と相談してどうするか検討していただけたら幸いです。

Comments

[HisaoAndo]

ukyodaさん
ご丁寧にありがとうございます！
JavaScriptの部分を削除した結果、フォーム内のテキスト入力が可能になりました！

しかし、フォームに入力したテキストが見えない現象が起きているので引き続きいじってみたいと思います。

ご指摘いただいております、挙動の変更については確認したいと思います。