[3.1.0] Third level menu items can't be clicked

[MaticSulc]

Bug report

Summary

When clicking the third level menu items (under Toggle Language and Reports), the following error is thrown:

modx.layout.js?mv=310pl:607 Uncaught TypeError: _this.focusRestoreEls?.pop(...)?.parentNode?.nextSibling?.focus is not a function
at modx.layout.js?mv=310pl:607:84

When hovering over the link, the proper URL seems to be present. This might be related to the case we updated using a custom manager theme, but I don't find that likely - since it has not fixed itself even by changing the theme to default and clearing all caches.
This is almost certainly related to #16530.

Step to reproduce

1. Update to MODX 3.1
2. Click any third level menu items (Error log, change a language ...)

Observed behavior

An error, mentioned above is thrown.

Expected behavior

The proper page should be opened.

Environment

MODX 3.1.0
PHP 8.3.8

[jenswittmann]

I think its related to #16613. Thanks for reporting it! I'll also test it in the next days …

[matdave]

I've done some debugging, and it appears the function focus() is being called on a textNode "\n". Still looking a bit, but that's the "cause" of the error.

[matdave]

So the actual cause of the links not working is that as soon as you click, it forces a focus out, and doesn't register the click. My gut would be to remove:

                var focusRestore = (e) => {
                    requestAnimationFrame(() => {
                        if (!menu.contains(document.activeElement)) {
                            _this.focusRestoreEls?.pop()?.parentNode?.nextSibling?.focus();
                            hide(button);
                            window.removeEventListener('focusout', focusRestore);
                        }
                    });
                };
                window.addEventListener('focusout', focusRestore);

From the initSubPopper function, as that restores usability. I'm not entirely sure what that code's purpose is, but mabe @jenswittmann can chime in.

[matdave]

Just a summary, the error doesn't appear to be why the clicks aren't working. The error is caused by the function call "focus()" on a textNode. The clicks not working are because ExtJS is focusing out before registering the clicks. Once the focus out logic is removed, the clicks on sub elements work.

Basically, these are two separate but related issues.

[jenswittmann]

So the actual cause of the links not working is that as soon as you click, it forces a focus out, and doesn't register the click. My gut would be to remove:

                var focusRestore = (e) => {
                    requestAnimationFrame(() => {
                        if (!menu.contains(document.activeElement)) {
                            _this.focusRestoreEls?.pop()?.parentNode?.nextSibling?.focus();
                            hide(button);
                            window.removeEventListener('focusout', focusRestore);
                        }
                    });
                };
                window.addEventListener('focusout', focusRestore);

From the initSubPopper function, as that restores usability. I'm not entirely sure what that code's purpose is, but mabe @jenswittmann can chime in.

This is a good workaround! I will rewrite this in the next few days.

Explanation: When you open a submenu and tab through it, the submenu should close when you leave the last item. If the above code is removed, the subnav will not close when exiting via keyboard navigation.

[matdave]

@jenswittmann i haven't tested, but you may be able to add a click event listener that nulls out that focusRestore logic. Just a theory.

[jenswittmann]

@MaticSulc can you test, if this new JS file solves your problem?

Replace manager/assets/modext/modx.jsgrps-min.js with this file and replace manager/assets/modext/core/modx.layout.js with this file.

@matdave and @jaygilmore i have a hotfix for this: #16671

@theboxer i also have removed the _this variable 😸

[MaticSulc]

@jenswittmann doesn't fix it for me. I've tried clearing MODX and browser cache ... didn't work. Tested in Brave and Edge.

[jenswittmann]

@MaticSulc did you get the same error or a new one? Can you show me the console error? What browser version are you using? https://www.whatsmybrowser.org/

Seems to work: https://modxcommunity.slack.com/archives/C042Q4YS7/p1735550458855799?thread_ts=1734942248.468539&cid=C042Q4YS7

[MaticSulc]

Can confirm as already written on Slack, this fixes the problem. @jenswittmann