Chosen: prise en charge des attributs html5 requis ?

@Aharito N'allons- nous pas résoudre le problème de l'ordre de tabulation en le faisant?

Merci @Aharito, cela fonctionne très bien avec la version 1.1.0 choisie, remplacez simplement $('select.chzn') par $('.chosen-select') .

Je pensais avoir essayé ce clip: rect trick, et j'ai trouvé un problème avec. Peut-être avec un navigateur plus ancien ? Je suppose que si ça marche maintenant, c'est super.

Je pense qu'il peut également y avoir des problèmes d'onglet avec ma solution (je ne me souviens pas, cela fait un moment) - J'ai réduit l'impact en appliquant uniquement le correctif aux champs qui posent l'attribut requis.

Nous avons standardisé cela pour tous les appels à $().chosen()

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !options || _.isObject(options)

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style')
  }

  var ret = select.oldChosen(options)

  if (is_creating_chosen) {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style','display:visible; position:absolute; clip:rect(0,0,0,0)');
  }
  return ret
}

@ghiculescu Cela ne résout pas le problème de tabulation ou de décalage dans la sélection, n'est-ce pas?

@DASPRiD Nope .

qu'en est-il de cela comme solution de dissimulation possible.

ce n'est pas parfait, mais en fait, cela empêche la sélection d'origine d'apparaître en passant le focus à la prochaine boîte de dialogue choisie, mais c'est peut-être un pas de plus

"chosen-select" n'est qu'un sélecteur pour les sélections que j'ai avec une classe particulière, je ne sais pas si "click focus" couvre tous les événements respectifs auxquels je devrais m'accrocher, mais peut-être que quelqu'un peut dire ce qui manque?

il est également possible que j'aie mal compris quelque chose à propos de la structure html choisie et que find("a") soit trop libéral, quelqu'un a-t-il plus d'expérience ?

$(".chosen-select").on("click focus",function(event){
    $(this).next(".chosen-container").find("a").trigger(event.type);
});

oh, et sûrement " display:visible " devrait être " display: block " ou quelque chose ? car la visibilité : visible est valide, mais l' affichage : visible, je suis sûr que ce n'est pas le cas

ce que j'ai trouvé, c'est que si vous avez plusieurs sélections côte à côte dans le même conteneur, cela les déplace toutes au mauvais endroit, donc la position : absolue fait alors apparaître le message de validation dans la mauvaise position.

J'ai résolu ce problème en me détachant et en me rattachant au conteneur choisi, comme si

$(".chosen-select").each(function(){
    $(this).next(".chosen-container").prepend($(this).detach());
});

la solution ci-dessus, après une enquête plus approfondie, montre qu'elle désactive complètement la tabulation dans les champs et que je ne parviens pas à résoudre le problème, mais elle élimine le problème de la sélection qui apparaît lorsque vous parcourez, c'est donc le plus problème important dans mon esprit, je peux vivre sans tabulation si je peux l'avoir afin que cela ne casse pas l'affichage, vu que de plus en plus de personnes utilisent des appareils mobiles et ne tabulent pas de toute façon, cela n'affecte que les utilisateurs de bureau, toujours important, mais relativement parlant, gérable.

Cependant, si quelqu'un résout ce problème d'une manière ou d'une autre, je suis très intéressé de le savoir.

ok, donc suite à ce que j'essayais auparavant, j'ai trouvé que les événements choisis utilisaient et j'ai décidé que lorsque je faisais un événement sur la sélection maintenant cachée, je pouvais le détourner et déclencher un événement choisi pour l'ouvrir.

je pense que ça marche bien.

$(".chosen-select").each(function(){
    //    take each select and put it as a child of the chosen container
    //    this mean it'll position any validation messages correctly
    $(this).next(".chosen-container").prepend($(this).detach());

    //    apply all the styles, personally, I've added this to my stylesheet
    $(this).attr("style","display:block!important; position:absolute; clip:rect(0,0,0,0)");

    //    to all of these events, trigger the chosen to open and receive focus
    $(this).on("click focus keyup",function(event){
        $(this).closest(".chosen-container").trigger("mousedown.chosen");
    });
});

Je pense que c'est la meilleure version que j'ai à ce jour. Heureusement, cela résout le problème de tabulation vers l'avant, il y a toujours la tabulation inversée, vous ne pouvez pas reculer dans une sélection choisie car à la seconde où vous tabulez dans l'élément de sélection, vous vous recentrez immédiatement sur le conteneur choisi, ce qui signifie que vous ' re piégé dans le seul fait de pouvoir tabuler vers l'avant.

Ce peut être une idée de garder une trace de l'élément précédent et si l'élément qui avait auparavant le focus de tabulation était devant l'élément focalisé actuel, vous reculez, puis passez de manière appropriée le recentrage sur l'onglet choisi et sélectionnez l'onglet précédent, mais je ne sais pas comment faire.

Après une très longue lecture, j'ai pensé avoir essayé les suggestions soumises au fil des ans.

Malheureusement, je n'ai pas pu faire fonctionner le code de @christhomas . Je l'invoque dans une fonction de soumission sans résultats visibles (pas d'erreurs non plus).

La bonne nouvelle est que la nouvelle fonction de @ghiculescu fonctionne comme un régal car je peux toujours utiliser le fichier CDN choisi et simplement utiliser la fonction dans mon fichier js.

@DASPRiD @charettes que veux-tu dire par onglet ne fonctionne pas avec la fonction modifiée ? Cela semble fonctionner pour moi

Assez facile pour ajouter tabindex: -1 à l' extrait de @ghiculescu , résolvant le problème de tabulation.

Exemple : http://jsfiddle.net/hq7b426j/

Je pouvais voir le problème maintenant! Votre ajout fonctionne très bien @andreialecu

Il y avait un autre ajout nécessaire en passant. Sur l'iPhone ou d'autres appareils non pris en charge, le violon ne fonctionnerait pas correctement. Chosen se désactive sur iPhone et laisse le <select> inchangé, et le code dans le violon ci-dessus le masquerait, ne laissant aucun moyen d'interagir avec le select.

Ce violon le corrige (en ajoutant un affichage : aucun contrôle) :
http://jsfiddle.net/hq7b426j/1/

Ah c'est encore mieux !! Merci! Je teste toujours aussi, mais je posterai si quelque chose d'autre arrive

@CaptainN s'il vous plaît bref, j'ai le même problème. wr je dois mettre ce code. J'utilise le thème inspina de wrapbootstrap.

@ vidhyaprakash85 Je ne sais pas ce que vous voulez dire. J'avais forké il y a longtemps et j'ai écrit une pull request (#900) mais les dépôts ne sont plus synchronisés maintenant, et mon fork est très obsolète. Vous pouvez le trouver ici si cela vous aide : https://github.com/adcSTUDIO/chosen

j'utilise déjà https://github.com/harvesthq/chosen comment faire ça :(

@andreialecu ton code fonctionne bien ! Merci!!!

Merci @christhomas votre code a très bien fonctionné :dancer:

Ni @christhomas ni n'ont fonctionné pour moi en utilisant une sélection multi-groupe. le laisser à la validation du serveur pour l'instant.

Lorsque j'ai essayé le patch @ghiculescu , cela a fonctionné sauf qu'un défilement était affiché tout le temps, sous la boîte de sélection.
Lorsque j'ai essayé le correctif @christhomas , la fenêtre contextuelle est apparue sans que le champ de recherche ne s'ouvre.

J'ai dû modifier le script de @ghiculescu pour pouvoir appeler choisi deux fois comme tel :

target.find('select')
        .chosen('destroy')
        .chosen({disable_search_threshold: 10})

Sinon, 2nd trip a supprimé le style qui avait été ajouté dans le premier :

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !!options

    var style = 'display:visible; position:absolute; clip:rect(0,0,0,0);'

        if (is_creating_chosen && select.css('position') === 'absolute' && select.attr('style') != style) {
            // if we are creating a chosen and the select already has the appropriate styles added
            // we remove those (so that the select hasn't got a crazy width), then create the chosen
            // then we re-add them later
            select.removeAttr('style')
        }

        var ret = select.oldChosen(options)

        // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
        if (is_creating_chosen && select.css('display') === 'none') {
            // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
            // only do this if we are initializing chosen (no params, or object params) not calling a method
            select.attr('style', style);
            select.attr('tabindex', -1);
        }
        return ret
}

Je viens d'ajouter cette condition supplémentaire au 1er if : && select.attr('style') != style

@doganmeh Fonctionne très bien dans Chrome et mobile (avec Chrome) mais testé dans Firefox 53.0 où cela ne fonctionne pas

Même ce http://jsfiddle.net/hq7b426j/1/ ne fonctionne pas dans Firefox 53.0

Hmmm, mais cela ressemble plus à un problème de Firefox car si vous cliquez plusieurs fois sur le bouton, vous verrez que Firefox essaie d'afficher le message (mais celui-ci n'est jamais rendu complètement)

J'ai utilisé cette solution. C'est très simple et fonctionne parfaitement :

<style>
    select.submitted:invalid + .chosen-container{
        border-color: red !important;
    }
</style>

$('#yourSelector').chosen({
                no_results_text: "yourText",
                disable_search_threshold: 9,
                search_contains: true
                //your parameters
    }).on('invalid', function(){
        $(this).addClass('submitted');
    });

il semble que cela ne fonctionne pas si vous avez choisi avec plusieurs sélections :
http://jsfiddle.net/jeromax/o5a8aogh/

Je l'ai corrigé.

`
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = fonction (options) {
var select = $(this),
is_creating_chosen = !!options;

if (is_creating_chosen && select.css('position') === 'absolu') {
// si nous créons un choisi et que le select a déjà ajouté les styles appropriés
// nous les supprimons (pour que le select n'ait pas une largeur folle), puis créons le choisi
// puis nous les rajoutons plus tard
select.removeAttr('style');
}

var ret = select.oldChosen(options)

// n'agit que si le select a un affichage : aucun, sinon le choix n'est pas supporté (iPhone, etc)
if (is_creating_chosen && select.css('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
// ne le faisons que si nous initialisons choisi (pas de paramètres ou de paramètres d'objet) sans appeler de méthode

  $(this).each(function(index){
      if($(this)[0].multiple==true){
          $(this).attr('style','display:visible; width:0px; height:0px; margin-top:25px; position:absolute; clip:rect(0,0,0,0)');
      }else{
          $(this).attr("style","display:visible; position:absolute; clip:rect(0,0,0,0)");
      }
  })

select.attr('tabindex', -2);

}
retour ret
}
`

+1

Quelqu'un peut-il commettre un correctif pour cela? C'est un problème assez ancien et une fonctionnalité très importante de nos jours. Merci.

Ne fonctionne pas sur la dernière version.

Cela semble rompre la validation du formulaire angular.js lorsque vous utilisez également angular-chosen.

Nous sommes en 2018 et nous avons toujours le même problème. C'est un enfer comment les normes HTML ne peuvent pas fonctionner correctement et intégrées avec des plugins externes. Temps fou :)

Cela casse également le plugin choisi par Drupal. Voir https://www.drupal.org/project/chosen/issues/2705891

Je n'ai pas trouvé de solution appropriée à cela autre qu'une solution de contournement :

<div class="form__select">
  <select class="chosen">
    <!-- options -->
  </select>
</div>

.form__select {
    position: relative;
}

.form__select .chosen {
    display: block !important;
    height: 0;

    position: absolute;
    left: 35px;
    bottom: 0;

    outline: none;
    border-color: white;

    pointer-events: none;
}

Si vous utilisez Chosen pour tous les éléments select , vous pouvez utiliser ce CSS pour le rendre visible (au DOM), mais pas d'opacité, pas de hauteur, position absolue.

Ces sélecteurs CSS ciblent les éléments de sélection non valides, l'un d'entre eux ciblant multiple ajoutant un 15px margin-top pour le centrer sur les éléments à sélection multiple.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
   margin-top: 15px !important;
}

Démo : http://jsfiddle.net/tripflex/2zdeu9oc/

MAIS VRAIMENT ... cela devrait déjà être géré par la lib Chosen.JS

Voici ma solution de contournement, si elle est utile:

// Initialise Chosen
$(function () {
    $('select').chosen();
});

// Place the original input behind the Chosen input, matching the height and width so that the warning appears in the correct position
$('select').on('chosen:ready', function () {
    const height = $(this).next('.chosen-container').height();
    const width = $(this).next('.chosen-container').width();

    $(this).css({
            'position': 'absolute',
            'height': height,
            'width': width,
            'opacity': 0
        })
        .show();
});

@jonathanbull pouvez-vous le montrer dans son contexte ? J'ai essayé votre solution et cela n'a pas fonctionné.

@AndrewSouthpaw Ceci est mon code, les correctifs fonctionnent bien pour moi :)

$("#select").val([]); // disable default selection by browser
$('#select').on('chosen:ready', function(evt, params, chosen) {
    $(this).css({'position': 'absolute', 'height': 0, 'opacity': 0}).show();
});
$("#select").chosen();

J'utilise un code légèrement différent (basé sur le code ici):

$('.chosen-select').on("chosen:ready", function (evt, data) {
  $(this)
    .addClass('chosen_hidden')
    .attr('tabindex', '-1')
    .prependTo(data.chosen.container)
    .show()
  })
  .chosen({width: '100%'})

.chosen_hidden {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%; // required for IE 10
  // **not required** opacity: 0;
}

Il ne gère pas l'action "détruire", mais il positionne bien le message d'erreur et semble fonctionner sur Firefox et Chromiun. Comme le sélecteur d'origine n'est pas masqué, la bordure de surbrillance d'erreur est visible. Mise à jour : avec max-height ça marche aussi sur IE. Autre mise à jour : ajout de tabindex -1 pour s'assurer qu'il ne reçoive pas le focus. (tout en étant focalisable et recevoir des messages d'erreur).

Il y a eu un PR ouvert qui résout ce problème, mais je pense qu'il s'est perdu depuis que l'autre fil ciblé a été fermé. Voir #2594

@jhedstrom aimerait voir cela fusionné. Savez-vous si cette bibliothèque est toujours maintenue ?

J'ai utilisé quelque chose de similaire à la solution de

https://github.com/harvesthq/chosen/pull/2594#issuecomment-714806139

Merci @jhedstrom de m'avoir orienté dans la bonne direction !