Contrib.social

Read only "machine name" field appears and disappears within certain admin pages, causing layout shift

Open on Drupal.org →
Created on 16 April 2024, 8 months ago
Updated 22 April 2024, 8 months ago

Problem/Motivation

On certain pages including /admin/structure/menu/manage/admin and /admin/structure/types/add, the machine name field appears, and then is immediately hidden by JavaScript.

Sometimes this field is read only (like on the menu pages) and sometimes its editable (like on the add content type page), and is populated by JavaScript (via machine-name.js). Note that when this is the case, if the form is submitted with a duplicate machine name the field should become visible.

Steps to reproduce

Navigate to /admin/structure/menu/manage/admin and /admin/structure/types/add and notice the layout shift.

Proposed resolution

Use modern CSS including :has() and the at-media scripting feature to reduce the layout shift.

Note the JS that does the hiding is at https://git.drupalcode.org/project/drupal/-/blob/11.x/core/misc/machine-.... In the MR below, I've used CSS :has() to hide the same selectors that the JS affects. I've also modified the selector so that it doesn't do any hiding if the form item is in an error state, which happens when a duplicate content type is created (example, try to create another content type called article and the field will appear)

Remaining tasks

do it, review it, commit it.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro  →

Last updated about 6 hours ago

Created by

🇺🇸United States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
  • Performance

    It affects performance. It is often combined with the Needs profiling tag.

Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024