Unable to preventDefault inside passive event listener on mobile view

I have ASP.net mvc project. In my reservation page, dropdown menus are works fine. But when I switch mobile view, I get an error on javascript side. Error is

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

I check this error and I found Unable to preventDefault inside passive event listener this topic. And applied the solutions. none of them worked!

I tried

give #RefectoryId style touch-action:none; didn't work!

document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false }); didn't work

document.addEventListener("touchmove", this.mousewheel.bind(this), { passive: false }); didn't work

I want my dropdown work on mobile view, I say again, It runs perfectly on normal view. Just don't work on mobile view.

My JavaScript Side

<script>

    var reservationCount = 0;
    var totalAmount = 0;

    $(document).ready(function () {
        $("#reservationCount")[0].textContent = "(" + reservationCount + ")";


        //İlk açıldığında rezervasyon sayfasının acık gelmesi için
        var tablinks = document.getElementById("reservationPageHead");
        tablinks.className = tablinks.className + " active";
        document.getElementById('reservationPage').style.display = "block";

        $("#RefectoryId").select2({
            allowClear: true,
            placeholder: 'Yemekhane Seçiniz',

            // dropdownParent: $(".bootbox-body"),
        });

        var refectorySelect = $('#RefectoryId');
        refectorySelect.on("select2:select", function (e) {
            var foodMealId = $("#FoodMealId").val();
            var refectoryId = $("#RefectoryId").val();
                    $.ajax({
                        url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
                        data: { refectoryId: refectoryId },
                        type: "POST",
                        async: false,
                        success: function (returnData) {
                          if (returnData.data == undefined) {
                               PageToastr(returnData.type, returnData.message, returnData.title);
                          }
                          else {
                               //FoodMeal List
                              $("#FoodMealId option[value]").remove();
                              $("#FoodMealId").select2({
                                  allowClear: true,
                                  placeholder: 'Seçiniz',
                                  data : returnData.data,
                              });
                          }
                      },
                      beforeSend: function () {
                          $(".loaderDiv").show();
                          $(".loader").show();
                      },
                      complete: function () {
                          $(".loaderDiv").hide();
                          $(".loader").hide();
                      },
                      error: function (xhr, status, err) {
                        if (xhr.status === 999) {
                            noAuthorize(this.url);
                        }
                      }
            });
            var foodMealId = $("#FoodMealId").val();
            GetCalendarMenuPartial(foodMealId, refectoryId);
        });


        $("#FoodMealId").select2({
            allowClear: true,
            placeholder: 'Öğün Seçiniz',
            //dropdownParent: $(".bootbox-body"),
        });

        var foodMealSelect = $('#FoodMealId');
        foodMealSelect.on("select2:select", function (e) {
            var foodMealId = $("#FoodMealId").val();
            var refectoryId = $("#RefectoryId").val();
            GetCalendarMenuPartial(foodMealId, refectoryId);
        });


        // Rezervasyonu tamamla için tooltip
        $('#completeReservation').tooltip('update');
    });
</script>

My All Code

<div class="clearfix">
    <div class="row">
        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
            <div class="alert alert-secondary" role="alert">
                <strong><i class="fa fa-exclamation-circle"></i> Önemli Bilgi</strong> - Tamamlanan rezervasyonlar iptal edilemez. Sadece farklı bir tarihe ertelenebilir.
            </div>
            <div class="m-portlet m-portlet--tabs m-portlet--mobile ">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-toolbar">
                        @*<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand nav-tabs-line-2x nav-tabs-line-right nav-tabs-bold" role="tablist">
                                <li class="nav-item">
                                    <a id="reservationPageHead" class="nav-link active" data-toggle="tab" role="tab" aria-selected="true">
                                        <i class="fa fa-calendar-alt" aria-hidden="true"></i>Rezervasyon Seçimi
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a id="paymentPageHead" class="nav-link" data-toggle="tab" role="tab" aria-selected="false">
                                        <i class="fa fa-credit-card" aria-hidden="true"></i>Ödeme Yap
                                    </a>
                                </li>
                            </ul>*@
                        <div class="tab">
                            <button id="reservationPageHead" class="tablinks"><i class="fa fa-calendar-alt" aria-hidden="true"></i>&nbsp; Rezervasyon Seçimi</button>@* onclick="openTab(event, 'reservationPageHead', 'reservationPage')"*@
                            <button id="paymentPageHead" class="tablinks">  <i class="fa fa-credit-card" aria-hidden="true"></i>&nbsp; Ödeme Yap</button>@* onclick="openTab(event, 'paymentPageHead', 'paymentPage')"*@
                        </div>

                    </div>
                </div>

                <div class="m-portlet__body" style="padding-top:12px;">
                    <div class="tab-content">
                        @*<div id="London" class="tabcontent">
                                <h3>London</h3>
                                <p>London is the capital city of England.</p>
                            </div>

                            <div id="Paris" class="tabcontent">
                                <h3>Paris</h3>
                                <p>Paris is the capital of France.</p>
                            </div>

                            <div id="Tokyo" class="tabcontent">
                                <h3>Tokyo</h3>
                                <p>Tokyo is the capital of Japan.</p>
                            </div>*@
                        <div class="tab-pane active tabcontent" id="reservationPage" role="tabpanel">
                            <div class="col-sm-12 col-md-12">
                                <div class="form-group row rowR">
                                    <label class="form-control-label col-md-4"><strong>Yemekhane</strong>  </label>
                                    ***<div class="col-md-8">
                                        @Html.DropDownListFor(x => x.RefectoryId, new SelectList(Model.Refectories, "Id", "Name"), ("Seçiniz"), new { Id = "RefectoryId", @class = "form-control select2" })
                                    </div>
                                </div>

                                <div class="form-group row rowR">
                                    <label class="form-control-label col-md-4"><strong>Öğün</strong>  </label>
                                    <div class="col-md-8">
                                        @Html.DropDownListFor(x => x.FoodMealId, new SelectList(Model.FoodMeals, "Id", "Name"), ("Seçiniz"), new { Id = "FoodMealId", @class = "form-control select2" })***
                                    </div>
                                </div>

                            </div>


                            <div id="calendarMenuPartial" class="row">

                            </div> <!-- row -->

                        </div> <!-- tab-pane -->
                        <div class="tab-pane tabcontent" id="paymentPage" role="tabpanel">

                            
                            @using (Html.BeginForm("DoPaymentSave", "Reservation", FormMethod.Post))

                            {
                                @Html.HiddenFor(x => x.AddCardMenuString)

                                @Html.HiddenFor(x => x.Description)

  
                                <div class="row">
                                    @*<div class="col">
                                            <div class="card paymentCard bg-light mb-4" style="min-height: 300px;">
                                                <div class="card-header"><i class="fa fa-credit-card-alt"></i> Kart Görseli</div>
                                                <div class="card-body" style="min-height:264px;">
                                                    <div class='card-wrapper'></div>
                                                </div>
                                            </div>
                                        </div>*@


                                    <div class="col">
                                        <div class="card paymentCard bg-light mb-4">
                                            @* style="min-height: 405px;" ozelliği gecici olarak verildi. Mobil uyumlu değil.*@
                                            <div class="card-header"><i class="fa fa-credit-card"></i> Kart Bilgileri</div>
                                            <div class="card-body">

                                                <div class="row">
                                                    <div class="col-xl-6 col-md-12 col-sm-12 col-xs-12">

                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <h5>
                                                                    <i class="fa fa-credit-card"></i> Kart Numarası <br />
                                                                </h5>
                                                                @Html.TextBoxFor(x => x.number, new { @name = "number", @type = "text", @class = "form-control card-number", @placeholder = "16 Haneli Kart Numarası", @maxlength = "19" })

                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <h5>
                                                                    <i class="fa fa-user"></i> Kart Sahibi <br />
                                                                </h5>
                                                                @Html.TextBoxFor(x => x.name, new { @name = "name", @type = "text", @class = "form-control name", @placeholder = "Kart Sahibi" })


                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-sm-6">
                                                                <h5>
                                                                    <i class="fa fa-calendar"></i> Son Kul. Tarihi (Ay) <br />
                                                                </h5>
                                                                @Html.DropDownListFor(x => x.expirymonth, new List<SelectListItem>()
                                                                {
                                                                    new SelectListItem() { Value = "01", Text = "01" },
                                                                    new SelectListItem() { Value = "02", Text = "02" },
                                                                    new SelectListItem() { Value = "03", Text = "03" },
                                                                    new SelectListItem() { Value = "04", Text = "04" },
                                                                    new SelectListItem() { Value = "05", Text = "05" },
                                                                    new SelectListItem() { Value = "06", Text = "06" },
                                                                    new SelectListItem() { Value = "07", Text = "07" },
                                                                    new SelectListItem() { Value = "08", Text = "08" },
                                                                    new SelectListItem() { Value = "09", Text = "09" },
                                                                    new SelectListItem() { Value = "10", Text = "10" },
                                                                    new SelectListItem() { Value = "11", Text = "11" },
                                                                    new SelectListItem() { Value = "12", Text = "12" },
                                                                }, null, new { @name = "expiry-month", @type = "text", @class = "form-control expiry-month", @placeholder = "AA" })

                                                            </div>
                                                            <div class="col-sm-6">
                                                                <h5>
                                                                    <i class="fa fa-calendar"></i> Son Kul. Tarihi (Yıl) <br />
                                                                </h5>
                                                                @{
                                                                    var thisYear = DateTime.Now.Year;
                                                                    var expiryYears = new List<SelectListItem>();
                                                                    expiryYears.Add(new SelectListItem() { Value = thisYear.ToString(), Text = thisYear.ToString() });
                                                                    var xYear = thisYear;
                                                                    var one = 1;
                                                                    for (int i = 0; i < 15; i++)
                                                                    {
                                                                        xYear += one;
                                                                        expiryYears.Add(new SelectListItem() { Value = xYear.ToString(), Text = xYear.ToString() });
                                                                    }
                                                                }
                                                                @Html.DropDownListFor(x => x.expiryyear, expiryYears, null, new { @name = "expiry-year", @type = "text", @class = "form-control expiry-year", @placeholder = "YYYY" })
                                                            </div>
                                                        </div>


                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <h5>
                                                                    <i class="fa fa-lock"></i> CVV <br />
                                                                </h5>
                                                                @Html.TextBoxFor(x => x.cvc, new { @name = "cvc", @type = "text", @class = "form-control cvc", @placeholder = "CVV", @maxlength = "3" })
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <h5>
                                                                    <i class="fa fa-lira-sign"></i> Tutar <br />
                                                                </h5>
                                                                @Html.TextBoxFor(x => x.TotalAmount, new { id = "TotalAmount", @type = "text", @class = "form-control", @placeholder = "Tutar", @readonly = "readonly" })<br />
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <button id="backReservation" type="button" class="btn btn-danger btn-lg mr-4 pull-left" style="font-size:14px;">GERİ</button>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <input id="btnDoPayment" type="submit" class="btn btn-success btn-lg mr-4 pull-right" style="font-size: 14px; " value="ÖDEME YAP" />
                                        </div>
                                    </div>
                                </div>


                                @*</form>*@
                            }

                        </div> <!-- tab-pane -->
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xs-12">
            <div class="row">
                <div class="col-sm-12">

                    <div class="m-portlet m-portlet--mobile shoppingCart ">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-label">
                                <h3 class="m-portlet__head-title">
                                    <i class="fa fa-shopping-basket"></i> <small>Rezervasyon Listem  </small>
                                    <small id="reservationCount" class="text-dark"></small>
                                </h3>
                            </div>
                        </div>

                        <table id="shopping-cart" style="text-align: center">
                            <tr>
                                <td style="display: none">#</td>
                                <td>Menü</td>
                                <td>Öğün</td>
                                <td>Yemekhane</td>
                                <td>Adet</td>
                                <td>Fiyat</td>
                            </tr>
                            @*<tr>
                                    <td>02.04.2019</td>
                                    <td>1 Adet</td>
                                    <td>₺4,25</td>
                                </tr>
                                <tr>
                                    <td>03.04.2019</td>
                                    <td>1 Adet</td>
                                    <td>₺4,25</td>
                                </tr>
                                <tr>
                                    <td>05.04.2019</td>
                                    <td>1 Adet</td>
                                    <td>₺4,25</td>
                                </tr>*@
                        </table>
                        <table class="" style="text-align: right; margin-left:10px; margin-right:15px; font-size:15px; float:right">
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>Toplam: </td>
                                <td id="PayableAmount">₺0.00</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <button id="completeReservation" style="margin-left:auto;margin-right:auto;width:100%" class="btn btn-success mt-5" data-toggle="tooltip" data-placement="top" title="Seçilen menüleri satın almak için tıklayın">Rezervasyonu Tamamla</button>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-sm-12">
                    <div class="alert alert-secondary">
                        <table class="table table-striped- table-bordered table-hover">
                            <thead>
                                <tr class="m-datatable__row">
                                    <td>ÖĞÜN</td>
                                    <td>BAŞLANGIÇ SAATİ</td>
                                    <td>BİTİŞ SAATİ</td>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach (var fm in Model.FoodMealsInfo)
                                {

                                    <tr>
                                        <td>@fm.Name</td>
                                        <td>@fm.StartHour</td>
                                        <td>@fm.EndHour</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>




<script>

    var reservationCount = 0;
    var totalAmount = 0;

    $(document).ready(function () {
        $("#reservationCount")[0].textContent = "(" + reservationCount + ")";


        //İlk açıldığında rezervasyon sayfasının acık gelmesi için
        var tablinks = document.getElementById("reservationPageHead");
        tablinks.className = tablinks.className + " active";
        document.getElementById('reservationPage').style.display = "block";

        $("#RefectoryId").select2({
            allowClear: true,
            placeholder: 'Yemekhane Seçiniz',

            // dropdownParent: $(".bootbox-body"),
        });

        var refectorySelect = $('#RefectoryId');
        refectorySelect.on("select2:select", function (e) {
            var foodMealId = $("#FoodMealId").val();
            var refectoryId = $("#RefectoryId").val();
                    $.ajax({
                        url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
                        data: { refectoryId: refectoryId },
                        type: "POST",
                        async: false,
                        success: function (returnData) {
                          if (returnData.data == undefined) {
                               PageToastr(returnData.type, returnData.message, returnData.title);
                          }
                          else {
                               //FoodMeal List
                              $("#FoodMealId option[value]").remove();
                              $("#FoodMealId").select2({
                                  allowClear: true,
                                  placeholder: 'Seçiniz',
                                  data : returnData.data,
                              });
                          }
                      },
                      beforeSend: function () {
                          $(".loaderDiv").show();
                          $(".loader").show();
                      },
                      complete: function () {
                          $(".loaderDiv").hide();
                          $(".loader").hide();
                      },
                      error: function (xhr, status, err) {
                        if (xhr.status === 999) {
                            noAuthorize(this.url);
                        }
                      }
            });
            var foodMealId = $("#FoodMealId").val();
            GetCalendarMenuPartial(foodMealId, refectoryId);
        });


        $("#FoodMealId").select2({
            allowClear: true,
            placeholder: 'Öğün Seçiniz',
            //dropdownParent: $(".bootbox-body"),
        });

        var foodMealSelect = $('#FoodMealId');
        foodMealSelect.on("select2:select", function (e) {
            var foodMealId = $("#FoodMealId").val();
            var refectoryId = $("#RefectoryId").val();
            GetCalendarMenuPartial(foodMealId, refectoryId);
        });


        // Rezervasyonu tamamla için tooltip
        $('#completeReservation').tooltip('update');
    });
</script>

<script>
    function GetCalendarMenuPartial(foodMealId, refectoryId) {
            $.ajax({
                url: '@Url.Action("NewReservationCalendarMenuPartial", "Reservation", new { area = "Common" })',
                data: { foodMealId: foodMealId, refectoryId: refectoryId, addCardMenu: $("#AddCardMenuString").val() },
                type: "POST",
                success: function (partialPage) {
                    if (partialPage.title != undefined) {
                        PageToastr(partialPage.type, partialPage.message, partialPage.title);
                        if (partialPage.result == '@Enums.ResultStatus.SessionTimeExpired.ToString()') {
                            setTimeout(function () { window.location.href = '/Login/Login'; }, 5000)
                        }
                    }
                    else {
                        $("#calendarMenuPartial").html(partialPage);
                    }
                },
                beforeSend: function () {
                    $(".loaderDiv").show();
                    $(".loader").show();
                },
                complete: function () {
                    $(".loaderDiv").hide();
                    $(".loader").hide();
                },
                error: function (xhr, status, err) {
                    if (xhr.status === 999) {
                        noAuthorize(this.url);
                    }
                }
            });
    }
</script>