Bug Megamenu e Hamburger

[token79]

Ciao! Ho notato un malfunzionamento per quanto riguarda il Megamenu e la sua interazione con l'Hamburger-menu. Questi sono i passi lato deskop:

• restringo la finestra facendo sparire il Megamenu e apparire l'Hamburgermenu
• seleziono una qualunque voce che mi indirizza su un'altra pagina
• allargo nuovamente la finestra facendo sparire l'Hamburgermenu e apparire il Megamenu
• a questo punto le voci principali del Megamenu non vengono più visualizzate, al più se sono presenti delle sotto voci vengono visualizzate queste ultime
• ovviamente ricaricando la pagina tutte le voci vengono nuovamente visualizzate.

Qualcuno ha idea di come risolvere il problema?

Grazie.

[lscorcia]

Ho notato lo stesso problema anche io. Purtroppo non ho la soluzione...

[lscorcia]

OK, ho dedicato qualche ora a cercare di risolvere questo inconveniente.

Il modo più semplice di replicare il problema:

• Caricare l'url https://italia.github.io/design-web-toolkit/components/preview/page--megamenu.html con la larghezza della finestra del browser ridotta "stile cellulare";
• Allargare la finestra del browser: il megamenu apparirà, ma avrà delle voci mancanti e mancheranno anche i simboli grafici che denotano i sottomenu.

Per prima cosa ho provato ad aggiornare il megamenu all'ultima versione disponibile sul repository di Adobe, senza successo.

Visto che il problema si verifica quando la pagina viene inizialmente caricata con il megamenu nascosto mi sono messo a debuggare cosa succede all'inizializzazione dei controlli ed ho notato che il metodo start esegue la seguente interrogazione sul DOM:

topnavitemlink = topnavitem.find(':tabbable:first') link

Ma gli elementi nascosti, come il nostro megamenu iniziale, non sono :tabbable, per cui questa riga non recupera nulla e gli script seguenti non inizializzano correttamente il menu.

Purtroppo non ho idea di come risolvere in modo "pulito" il problema, ma intanto possiamo aggirarlo aggiungendo subito dopo la riga 712 l'istruzione seguente:

if (!topnavitemlink.length) topnavitemlink = topnavitem.find('a:first')

Soluzione bruttina... ma funziona e non dovrebbe avere effetti collaterali.

Buona giornata, Luca

EDIT Ho parlato troppo in fretta. E' necessario anche modificare la riga 713 in questo modo:

topnavitempanel = topnavitem.children(':not(:tabbable)').not(topnavitemlink).last()

Così funziona anche per eventuali link di primo livello che non hanno sottomenu (es. Home Page).

[mbolzan]

magari dico una stupidata, ma in generale i framework js non sono "perfetti" nel gestire l'evento di rimensionamento della width, perchè questo non è un comportamento proprio standard. Mi spiego: se noi sviluppatori lo facciamo per testare il layout alle varie risoluzioni, è un conto e un semplice f5 semplifica e risolve tutto; ma chi ha un device ad una certa dimensione apre e naviga a quella dimensione, non la cambia in continuazione, al limite se lo fa (sposto una finestra tra 2 monitor, ruoto il cellulare) al primo click lato server torna tutto ok.

[lscorcia]

Ciao, sono d'accordo sul fatto che sia un bug dalla severity limitata (l'utente che me lo ha segnalato aveva per l'appunto girato il suo tablet), ma in realtà è solo un indizio di un problema più ampio: il componente MegaMenu di Adobe non è pensato per inizializzarsi in stato hidden. Usa tantissimo il selettore :tabbable e quindi se si comincia a scavare si trovano altri potenziali problemi - ad esempio ho avuto difficoltà nel navigare con la tastiera i menu di secondo livello, cosa che decisamente non ho tempo di indagare ora. Naturalmente convengo che si tratti più di un bug da segnalare upstream che non da correggere qui, per questo non ho inviato una pull request, però insomma... proprio ininfluente non è.

Just my 2c