Selectivizr consente di selezionare il menu a discesa per richiedere due clic per aprire in IE8 e sotto

Question

Recentemente ho implementato Selectivizr su un sito Web aziendale interno in quanto è necessario supportare IE7/8. Sfortunatamente, il nostro sito fa un sacco di caricamento di contenuti dinamici tramite jQuery/AJAX.

Per risolvere questo problema, ho sovraccaricato la funzione jQuery ready per ricaricare Selectivizr dopo che ha eseguito qualsiasi compito fosse stato impostato. Il mio codice è simile al seguente:

$(function() { 
    if ($('body.ie8, body.ie7, body.comp-view8, body.comp-view7').length > 0) { 
     (function() { 
      var original = jQuery.fn.ready; 
      var getSelectivizr; 
      jQuery.fn.ready = function() { 
       // Execute the original method. 
       original.apply(this, arguments); 

       clearTimeout(getSelectivizr); 
       getSelectivizr = setTimeout(function() { 
        $.getScript(selectivizr); 
       }, 50); 
      } 

     })(); 
    } 
}); 

Abbastanza semplice. Tuttavia, un compagno di squadra ha recentemente scoperto un bug che sembra essere correlato. In IE8/7 ogni dropdown di selezione che viene caricato dinamicamente nella pagina (non sono sicuro che i dropdown statici vengano eseguiti e nessuna di queste pagine li abbia), richiede due clic per aprirlo.

Per essere più specifici, in IE8/7, il primo clic sembra "mettere a fuoco" nel menu a discesa, mentre il secondo lo apre. Compatibilità Visualizza, in realtà si apre per un frazione di secondo e poi si chiude. Il secondo clic lo apre bene (purché rimani concentrato sul menu a discesa).

Avevo pensato che potesse essere un problema con ciò che Selectivizr stava facendo, in quanto non era progettato per funzionare con contenuti caricati dinamicamente, ma dopo un po 'di debug, sembra che sia il setTimeout a causare questo strano comportamento.

Sono a una completa perdita di come risolvere senza rimuovere la mia implementazione Selectivizr.

È probabilmente importante notare che setTimeout è necessario per impedire al browser di tentare di caricare Selectivizr più volte se vengono effettuate chiamate AJAX diverse poiché ciò può causare seri problemi di prestazioni all'interno del browser.

Nota: questa domanda non riflette in modo accurato il problema indicato nel titolo, quindi l'ho aggiornato per fornire una ricerca migliore! Dopo essere tornato a questo problema poche settimane dopo, ho riconosciuto che il mio debug iniziale mi aveva portato sulla strada sbagliata. Scusate la gente, ma ho fornito una risposta a ciò che spero di aiutare! :)

Answer 1

Quindi, ho finalmente avuto la possibilità di tornare a questo bug e sembra che la soluzione mi stava fissando nel a faccia in giù, mi ero appena perso a causa del fallimento del mio debug iniziale.

Si scopre che è stato un problema di selezione tutto il tempo. Sfortunatamente, fare qualsiasi tipo di cambiamento dinamico (JS) in una casella di selezione in IE8 e in basso fa sì che venga ridisegnato, il che costringe a chiudere (o non aprire mai, a seconda della versione/modalità). Il modo in cui selectivizr funziona è che aggiunge discretamente una classe agli elementi, come "slvzr-focus", usando JS per imitare il comportamento delle pseudo-classi; in questo caso ": focus".

Come tale, aveva senso limitare semplicemente selectivizr dall'applicare questo tipo di patch per selezionare le caselle a fuoco. La mia soluzione è la seguente, anche se potrebbe non essere per tutti (in alternativa, puoi semplicemente assicurarti che nessun selettore ": focus" esista nel tuo CSS, il che farà sì che selectivizr non attivi l'evento):

1) Trova la riga seguente in selectivizr.JS:

if (!hasPatch(elm, patch)) { 

    if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) { 

     cssClasses = toggleClass(cssClasses, patch.className, true); 
    } 

} 

2) avvolgerlo con il seguente se dichiarazione:

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) { 
} 

3) Il blocco dovrebbe essere simile a questo, quando il gioco è fatto:

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) { 
    if (!hasPatch(elm, patch)) { 

     if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) { 

      cssClasses = toggleClass(cssClasses, patch.className, true); 
     } 
    } 
} 

Spero che h sciami qualcuno là fuori

Grazie S/O!