shipshapecode/shepherd

classPrefix breaks target blocking

Open

#1298 aperta il 15 gen 2021

Vedi su GitHub
 (8 commenti) (0 reazioni) (0 assegnatari)JavaScript (622 fork)batch import
buggood first issue

Metriche repository

Star
 (11.601 star)
Metriche merge PR
 (Merge medio 3m) (1 PR mergiata in 30 g)

Descrizione

If you specify a classPrefix in the tour options, any highlighted elements in steps where canClickTarget = true are still clickable because the following css selector breaks:

.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{
    pointer-events:none
}

The following custom css rule has to be added, taking into account the classPrefix:

.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target *{
    pointer-events:none
}

Guida contributor

Direzione di ricerca
Il problema è che il selettore CSS per disabilitare il clic sugli elementi target utilizza una classe hardcoded '.shepherd target click disabled' ecc., ma quando viene utilizzato un classPrefix personalizzato, questi selettori dovrebbero includere il prefisso. Per risolvere, individuare dove è definito il CSS (probabilmente negli stili del componente o in un modulo CSS) e modificare il selettore in modo che sia dinamico in base all'opzione classPrefix. Controllare la logica di rendering dei passaggi e assicurarsi che lo stile pointer events venga applicato con la classe corretta. La correzione potrebbe comportare l'aggiornamento dell'oggetto di stile o l'iniezione di una regola con il prefisso.
Tech stack
javascript
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
CSS selectorsJavaScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60