WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 8 months ago

Last modified 8 months ago

#52638 closed defect (bug) (fixed)

JS error when clicking a submenu heading on the collapsed admin menu

Reported by: SergeyBiryukov Owned by: SergeyBiryukov
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: commit dev-reviewed
Focuses: ui Cc:

Description

Reported by @peterwilsoncc in comment:82:ticket:51812:

Overnight I twigged to another regression in [50420] -- in a few places $thing.get(0).trigger() is used. These will need to be changed to $thing.eq(0).trigger() as jQuery's get() function returns a DOM element rather than a jQuery object.

I've found a single instance of this in js/_enqueues/admin/common.js:

  1. Click the "Collapse menu" button at the bottom of the admin menu.
  2. Hover any icon and click the submenu heading (with the .wp-submenu-head class), e.g. "Posts".
  3. You'll get an error in the console:
    Uncaught TypeError: $(...).parent(...).siblings(...).get(...).trigger is not a function
        at HTMLLIElement.<anonymous> (common.js?ver=5.8-alpha-20210224.134900:843)
        at HTMLUListElement.dispatch (jquery.js?ver=3.5.1:5429)
        at HTMLUListElement.elemData.handle (jquery.js?ver=3.5.1:5233)
    

Same as in [50383], the click() method there is not the jQuery method, but is an HTML DOM method instead, so the change to that line can be reverted.

Change History (7)

#1 @SergeyBiryukov
8 months ago

In my testing, replacing $thing.get(0).trigger( 'click' ) with $thing.eq(0).trigger( 'click' ) removes the console error, but for some reason does not make the submenu heading clickable.

Reverting to $thing.get(0).click(); seems to work as expected, so I think we can go with that for now.

#2 @Clorith
8 months ago

Agreed, the old format should be used here, as the native .click() will be more performant (if negligible in this scenario) than going via jQuery any way.

#3 @SergeyBiryukov
8 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 50429:

Administration: Revert the change to click event handler for fly-out submenus.

The click() method there is not the jQuery method, but is an HTML DOM method instead.

This makes the fly-out submenu header clickable again when the menu is folded.

Follow-up to [50420].

Props peterwilsoncc.
Fixes #52638. See #51812.

#4 @SergeyBiryukov
8 months ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to the 5.7 branch after a second committer's review.

#5 @peterwilsoncc
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

This looks good to commit to 5.7.

Review notes:

  • Ran npm run grunt clean -- --dev
  • Searched ./src/js/_enqueues/**/*.js for the string .get(
  • Remaining items appear to be calling the correct native function/from or for another library

#6 @peterwilsoncc
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50437:

Administration: Revert the change to click event handler for fly-out submenus.

The click() method there is not the jQuery method, but is an HTML DOM method instead.

This makes the fly-out submenu header clickable again when the menu is folded.

Follow-up to [50420].

Props peterwilsoncc, SergeyBiryukov.
Merges [50429] to the 5.7 branch.
Fixes #52638. See #51812.

This ticket was mentioned in Slack in #core by monikarao. View the logs.


8 months ago

Note: See TracTickets for help on using tickets.