Select doesn't work properly on chrome

Topic: Select doesn't work properly on chrome

t3m.srl priority asked 6 months ago

Expected behavior I want the select to work properly. I'm encountering the same issue on the example page provided on your website: 'https://mdbootstrap.com/docs/standard/forms/select/'.

Actual behavior Inspecting the element, it appears that after the first click, it starts to continuously create elements on its own. Additionally, it does not allow clicking, as it does not trigger any change event or any graphical change. After multiple clicks, it seems to randomly work, but only once, and it keeps the previous selected option graphically active. I share with you my page with only the problem.

Resources (screenshots, code snippets etc.)

ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL);

require_once("sc_dev/db_conn.php");

require_once("obj/customers.php");

// start db connection
$conn = databaseConn();

/* load important objects */
$customerObj = new customerClass($conn, $_GET['c_id']);        // customerClass objects
$customer_info = $customerObj->getCustomerInfo();

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Cliente</title>
    <link rel="icon" href="img/T3M.png" type="image/png" />

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


    <!-- MDB ESSENTIAL CSS -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- MDB PLUGINS CSS -->
    <link rel="stylesheet" href="plugins/css/all.min.css" />

    <!-- Custom style.css -->
    <link rel="stylesheet" href="style.css">

    <!-- jQuery JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- SweetAllert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Custom script JS -->
    <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

    <?php include("element/header.php") ?>

    <div class="container-l1600 px-4">

            <div class="card shadow-0 mb-3">
                <div class="card-body py-4">
                    <h1 class="">Checkout</h1>
                    <h6 class="">Checkout, a un passo dal tuo ordine </h6>
                </div>
            </div>

            <div class="card shadow-0 mb-3">

                <div class="card-header py-3 mb-3">

                    <form class="row g-3 needs-validation" novalidate>

                        <div class="col-12">
                            <div class="form-outline">
                                <select name="countryUID" id="customerCountry" data-mdb-select-init data-mdb-filter="true">
                                    <option selected></option>
                                    <?php foreach ($customerObj->getCountries($conn) as $country_info) { ?>
                                        <option value="<?= $country_info['countryUID']; ?>" data-mdb-secondary-text="<?= $country_info['tld']; ?>" <?= ($customer_info['countryUID'] == $country_info['countryUID']) ? "selected" : "" ?>>
                                            <?= $country_info['name']; ?>
                                        </option>
                                    <?php } ?>
                                </select>
                                <label class="form-label select-label">Paese</label>
                            </div>
                        </div>

                    </form>

                </div>


            </div>

    </div>

    <?php include("element/footer.html"); ?>


</body>

<!-- MDB ESSENTIAL JS -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
<!-- MDB PLUGINS JS -->
<script type="text/javascript" src="plugins/js/all.min.js"></script>

</html>

Add comment

t3m.srl priority answered 6 months ago

0 0 Best answer

Please insert min. 20 characters.

Unfortunately, the issue in the snippet doesn't manifest, but it only appears in Chrome. I'm attaching a WeTransfer link with a video of another page from my project that exhibits the same error in the select component. the video issue: https://we.tl/t-JSE9ijRcDM

In video i try to click multiple time but with no result, as you can see there is a blinking on the code that is not expected. i see the same problem on chrome also in your select documentation page as shown in the video on this link: https://we.tl/t-tR1FyggaiB

Kamila Pieńkowska staff commented 6 months ago

I cannot replicate this behavior on my devices. Dos it occur on any other device? Have you tried updating your browser?

t3m.srl priority commented 6 months ago

When trying to replicate it on other devices, it seems to be a conflict related to the NordPass Chrome extension.

Kamila Pieńkowska staff commented 6 months ago

Extension can interfere with any code on your site, we cannot guarantee our package to work with every possible extension since they run it's own code.

Add comment

Kamila Pieńkowska staff answered 6 months ago