[js] click/focus issue on this page menu with Safari

phiw13 · 2020-10-05 04:47:14

Trying to build a menu popover with JS without using JQuery. I only found a few examples online. After a few attempts in the end I used the little script the Textpattern website uses. It works nicely on Firefox and Chromium-based browsers. Safari has a problem: it works nicely using the keyboard, but when clicking (macOS) or tapping (iOS) a link, the menu is not dismissed as is the case in Firefox.

Test page here: dev.l-c-n.com/tbz/tbz.html
Clicking / tapping or using the keyboard should (a) jump to the target and (b) dismiss/close the menu. In Safari the latter only happens when using the keyboard.

Any suggestion appreciated (or links to different examples). TIA

<aside> amazing how soo many JS related tutorials are (still) dependent on JQuery </aside>

PS – I have a faint idea about what is actually happening, in that when you use the pointer (clicking), Safari doesn’t really set or shift the focus, thus the focusing / focusout events are not triggered, but right now I don’t know how to fix that.

Pat64 · 2020-10-06 05:03:11

Hi Philippe.

Found for you, but I don’t know if these two solutions could help?

https://stackoverflow.com/questions/18914568/make-onclick-work-on-iphone/18914640

https://stackoverflow.com/questions/43335183/window-click-event-does-not-fire-on-ios-safari-javascript-only

phiw13 · 2020-10-06 07:17:06

Pat, thanks but the click() in itself is not really the issue if you are dealing with interactive elements like the <a />. the issue is more the way Safari, both iOS and macOS manage the focus when clicking or tapping. I made some progress with this, by using the click() event on the link

var navlink = document.querySelector(".pg-navlink");

navlink.addEventListener('click', function()
        {
          navtoggle.classList.remove('otsu-nav-toggle-active');
          navmenu.classList.remove('otsu-nav-open');
        });

that works… but so far only on the first link in the popup (there are 6). I’ll get there eventually…

thank you for looking

PS – did I tell that Javascript is not really my thing? (blame the inventor of the language; true fact actually)

Bloke · 2020-10-06 08:15:40

phiw13 wrote #326234:

that works… but so far only on the first link in the popup (there are 6). I’ll get there eventually…

You’re nearly there. Try selecting as a descendent of the otsu-nav-blocks. Something likethis (untested)

var navlist = document.getElementById('otsu-nav-blocks');
var navitems = navlist.querySelectorAll('a');
navitems.addEventListener('click', function(e) {
    e.preventDefault();
    navtoggle.classList.toggle('otsu-nav-toggle-active');
    navmenu.classList.toggle('otsu-nav-open');            
});

There’s probably a more efficient way of doing that by using delegation but I’m not big on how to do that in vanilla JS.

Last edited by Bloke (2020-10-06 08:17:10)

phiw13 · 2020-10-06 08:54:56

Bloke wrote #326236:

You’re nearly there. Try selecting as a descendent of the otsu-nav-blocks. Something likethis (untested)

Hmm, when I do that, I get:

TypeError: undefined is not a function (near '...navitems.addEventListener…')

see the (updated) test file: dev.l-c-n.com/tbz/tbz.html

jakob · 2020-10-06 15:37:26

phiw13 wrote #326237:

Hmm, when I do that, I get:

TypeError: undefined is not a function (near '...navitems.addEventListener…')...

see the (updated) test file: dev.l-c-n.com/tbz/tbz.html

Try iterating over the individual items of the querySelectorAll:

(function ()
{
    'use strict';

     // Responsive navigation menu.

     var navmenu = document.getElementById('otsu-page-navigation');

     if (navmenu) {
        var navtoggle = document.getElementById('otsu-nav-toggle');
        var navlist = document.getElementById('otsu-nav-blocks');

        navtoggle.addEventListener('click', function(e)
        {
            e.preventDefault();
            navtoggle.classList.toggle('otsu-nav-toggle-active');
            navmenu.classList.toggle('otsu-nav-open');
        });

        navlist.querySelectorAll('a').forEach(item => {
            item.addEventListener('click', event => {
                navtoggle.classList.toggle('otsu-nav-toggle-active');
                navmenu.classList.toggle('otsu-nav-open');            
            })
        });

    }

})();

phiw13 · 2020-10-07 00:47:43

jakob wrote #326240:

Try iterating over the individual items of the querySelectorAll:

(function ()...

This construction: forEach(item) is what I was missing combined with me misunderstanding querySelectorAll ! Thanks Jacob, now that popover works nicely on every device available.

philwareham · 2020-10-07 06:18:41

If any of your findings might also benefit my JavaScript on the Textpattern site nav then please can you open an issue at the site repo with the suggested improvements. Cheers all.

Pat64 · 2020-10-07 09:02:09

Hi Phil.

I found a strange behavior within browser small screens emulator for the search micro-design element: when I focus into it, the left input border sometimes is positionned in the middle of the Textpattern logo (Firefox PC), somethines just after the “T” letter (Google Chrome PC).

The simpliest way to get a pretty correct rendering (the input above the logo on the focus event), seems the change as this:

Line 3746:


	.search-form [type=search]:focus {
		left: 0;
		width: 100%;
		...
	}

Here is a screenshot (from the Lambda tests platform with a Samsung Galaxy S9):

Last edited by Pat64 (2020-10-08 04:35:33)

Textpattern CMS

Textpattern CMS support forum

#1 2020-10-05 04:47:14