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

[jhammond-git]

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).

[jhammond-git]

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

[thatmattlove]

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;