Topic: Select doesn't work properly on chrome
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>
Please recreate this error in the snippet.
Select component is suppose to create HTML elements after initiation to enable styling. This is expected behavior not a bug.
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 8 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 pro premium priority commented 8 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 8 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: Zbook workstation HP
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes