Unpinned menu won't fly out in the Devices or Circuits UI #5251

Closed
opened 2025-12-29 19:25:55 +01:00 by adam · 2 comments
Owner

Originally created by @jhammond-git on GitHub (Aug 31, 2021).

Originally assigned to: @thatmattlove on GitHub.

NetBox version

v3.0.0

Python version

3.8

Steps to Reproduce

  1. Unpin fly-out menu.
  2. Navigate to Devices (/dcim/devices/).
  3. Try to access the collapsed menu

Expected Behavior

Menu will fly out (expand to full width) and be clickable.

Observed Behavior

Menu stays in collapsed form and none of the links are active other than the "home" link at the top (the Netbox icon).

Originally created by @jhammond-git on GitHub (Aug 31, 2021). Originally assigned to: @thatmattlove on GitHub. ### NetBox version v3.0.0 ### Python version 3.8 ### Steps to Reproduce 1. Unpin fly-out menu. 2. Navigate to Devices (/dcim/devices/). 3. Try to access the collapsed menu ### Expected Behavior Menu will fly out (expand to full width) and be clickable. ### Observed Behavior Menu stays in collapsed form and none of the links are active other than the "home" link at the top (the Netbox icon).
adam added the type: bugstatus: accepted labels 2025-12-29 19:25:55 +01:00
adam closed this issue 2025-12-29 19:25:55 +01:00
Author
Owner

@jhammond-git commented on GitHub (Aug 31, 2021):

As someone pointed out this may be related to custom fields, as Devices have custom fields of "Support Provider" and "Support End Date".

@jhammond-git commented on GitHub (Aug 31, 2021): As someone pointed out this may be related to custom fields, as Devices have custom fields of "Support Provider" and "Support End Date".
Author
Owner

@thatmattlove commented on GitHub (Aug 31, 2021):

I can reproduce this under the following circumstances:

  1. Custom Field with a space in the name
  2. Custom Field must be of type 'Selection'

The issue appears related to this and this, i.e.

const label = document.querySelector(`label[for=${this.base.id}]`) as HTMLSelectElement;

While we could implement a workaround in the backend to enforce whitespace removal/replacement, I think the better solution would be to ensure the selector wraps the ID in quotes, for example:

const label = document.querySelector(`label[for="${this.base.id}"]`) as HTMLSelectElement;
@thatmattlove commented on GitHub (Aug 31, 2021): I can reproduce this under the following circumstances: 1. Custom Field _with a space_ in the name 2. Custom Field must be of type 'Selection' The issue appears related to [this](https://github.com/netbox-community/netbox/blob/bf05bc298656270ce28a17cc49e1697b6ce8c7fa/netbox/project-static/src/select/static.ts#L7) and [this](https://github.com/netbox-community/netbox/blob/bf05bc298656270ce28a17cc49e1697b6ce8c7fa/netbox/project-static/src/select/api/apiSelect.ts#L718), i.e. ```typescript const label = document.querySelector(`label[for=${this.base.id}]`) as HTMLSelectElement; ``` While we could implement a workaround in the backend to enforce whitespace removal/replacement, I think the better solution would be to ensure the selector wraps the ID in quotes, for example: ```typescript const label = document.querySelector(`label[for="${this.base.id}"]`) as HTMLSelectElement; ```
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#5251