J'utilise MaterialiseCSS pour créer un menu déroulant de sélection. Sur un ordinateur portable Mac, le menu déroulant fonctionne correctement (testé dans Safari et FireFox, et dans IE et Chrome via browserling.com). Cependant, lorsque je navigue sur le site Web à partir d'un ordinateur Windows (IE et Chrome), je dois toujours double-cliquer pour activer le menu déroulant. Je ne comprends pas pourquoi ce problème se produit. J'apprécierais que quelqu'un puisse signaler un problème spécifique avec le code comme indiqué ci-dessous:
<div class="dropdown-div">
<div class="input-field">
<select>
<option value="1" class="dropdown-text"><a class="dropdown-text-default" data-url="#General">General</a></option>
<option value="2"><a class="dropdown-text" data-url="#Option1">Option1</a></option>
<option value="3"><a class="dropdown-text" data-url="#Option2">Option2</a></option>
<option value="4"><a class="dropdown-text" data-url="#Option3">Option3</a></option>
<option value="5"><a class="dropdown-text" data-url="#Option4">Option4</a></option>
</select>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
Veuillez trouver la documentation de MaterialiseCSS ici .
3 Réponses :
Il s'agit d'un bogue de régression dans Chrome 73. Pour résoudre le problème, utilisez le code suivant: (C'est la seule solution que j'ai pu trouver.)
$('select').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation()))
Merci beaucoup d'avoir fourni cela! Je viens de revérifier et le code semble fonctionner parfaitement avec Chrome, mais maintenant la liste déroulante disparaît complètement (n'est pas rendue) dans IE. Connaissez-vous une solution à ce problème? Merci
Ici, le code ne fonctionne pas. Avez-vous autre chose que vous avez utilisé pour résoudre votre problème?
mb smth a changé dans d'autres versions de chrome. Idk (
Voici un hack, en utilisant jQuery
$('.add-ingredient-button').click(function(){
// due to a materialize css bug with chrome, take two clicks to activate the given selection
// we hack this by triggering another click on the #ingredient-unit instance here
$('.select-dropdown').trigger("click");
//then we get the dropdown instance, everything else can be done with jQuery
const ingredientUnit = M.FormSelect.getInstance($('#ingredient-unit'));
// we need to grab information from all those boxes
const name = $('#ingredient-name').val();
const value = $('#ingredient-value').val();
const unit = ingredientUnit.getSelectedValues();
console.log(name,value,unit);
});
J'ai eu le même problème sur les selects de matérialisation, je n'ai trouvé aucun correctif nulle part.
Donc la théorie est, si cela fonctionne avec un double clic, alors déclenchez un autre clic sur cette instance.
Voici le contexte que je l'ai appliqué pour mon application
J'ai un menu déroulant de sélection comme:
<div class="input-field ingredient-unit">
<select name="" id="ingredient-unit">
<option value="gr" selected>gr</option>
<option value="kg" >kg</option>
<option value="cups" >cups</option>
<option value="ml" >ml</option>
<option value="L" >L</option>
<option value="tsp" >tsp</option>
<option value="Tbsp" >Tbsp</option>
<option value="pcs" >pcs</option>
</select>
<label for="ingredient-unit"></label>
</div>
Pour obtenir la valeur de cette sélection, j'ai une fonction javascript comme:
$('.select-dropdown').trigger("click");
Lorsque le bouton avec la classe. Le bouton add-ingrédient est enfoncé, nous voulons obtenir le nom, la valeur et l'unité de l'ingrédient. L'unité est dans une instance de sélection de matérialiser.
La fonction est donc déclenchée lorsque nous cliquons sur .add-ingrédient-bouton, et nous déclenchons 'manuellement' un autre clic sur l'instance de sélection, qui sélectionne effectivement l'unité que l'utilisateur avait déjà sélectionné.
Je ne sais pas pourquoi cette erreur s'est produite, et je ne peux pas vraiment vous dire pourquoi cela fonctionne. Mais ça marche.
J'espère que ça aide!
La réponse est stopPropagation (). Mais le point important est que vous devez attendre l'initialisation du combo.
$(document).ready(function () {
//Give a time for initialization of combos
setTimeout(function () {
var kelle = $('.select-wrapper');// $('.select-wrapper');
$.each(kelle, function (i, t) {
t.addEventListener('click', e => e.stopPropagation())
});
}, 500)
});