Skip to content

Fix inconsistent disabled state across interfaces#26470

Merged
AlexGaillard merged 53 commits intomainfrom
florian/cms-1498-inconsistencies-in-the-disabled-state-of-interfaces
Jan 20, 2026
Merged

Fix inconsistent disabled state across interfaces#26470
AlexGaillard merged 53 commits intomainfrom
florian/cms-1498-inconsistencies-in-the-disabled-state-of-interfaces

Conversation

@formfcw
Copy link
Contributor

@formfcw formfcw commented Jan 9, 2026

Scope

What's changed:

  • Refactored all interfaces and sub-components to standardize the disabled and non-editable states

Rules for the Disabled state

  • The interface is visually grayed out
  • The interface behaves as frozen
    • Elements and buttons remain visible
    • All interactive elements are disabled and grayed out
  • The interface is non-interactive, with limited exceptions (e.g. tooltips for inline validation)
    • Actions that could change a value as well as custom controls are disabled
  • The interface is not focusable
  • The cursor changes to not-allowed for clickable elements (excluding text inputs and non-interactive content)
  • In relational interfaces, the edit icon is also disabled, preventing access to nested relational content

Rules for the Non-Editable state

  • Behaves the same as the Disabled state, except:
    • The interface is not visually grayed out
    • Action buttons that modify values are removed
  • The value must remain accessible
    • Relational interfaces remain clickable, allowing access to nested relational content

The non-editable state is visible when opening the shared item view or the comparison modal (by opening a revision or promoting a version).

Video → Disabled

disabled.mov

Video → Non-Editable

non-editable.mov

Potential Risks / Drawbacks

  • Disabled state may differ from existing user expectations

Tested Scenarios

  • Interfaces in normal, disabled, non-editable state
  • Interface settings such as optional buttons, placeholder, color
  • Disabled interfaces in the item form view, bulk edit
  • Non-editable interfaces in the comparison modal and the shared item view
  • Interfaces with and without a value

Review Notes / Questions

  • Review per commit or per interface
  • Test every interface, and, ideally, all of its options in its disabled and non-editable state
  • System interfaces are not included (_system)
  • Relational interfaces open on direct click in non-editable mode instead of clicking on the edit icon
  • For input-code and input-rich-text-md (CodeMirror): Focus and tab navigation do not work correctly. However, a
    separate open PR updating the CodeMirror library is expected to resolve this.
  • For list-m2m and list-o2m (using v-table) drag-handles and bulk select icons are hidden due to the complexity of the
    change.
  • Map interface: Significant refactoring was required to enable a disabled state. UI elements are removed due to lack of
    disabled/read-only support in the underlying library
  • The dropdown-multiple interface can be opened in non-editable mode, allowing access to the selected values. This is
    necessary because when all options are selected, the field displays “All Items” instead of listing all selected
    values.

Checklist

  • Added or updated tests → will be submitted later
  • Documentation PR created here or not required
  • OpenAPI package PR created here or not required

Fixes #26204

formfcw added 30 commits January 9, 2026 20:43
formfcw added 18 commits January 14, 2026 16:22
@formfcw
add tests for VDetail and VInput
3fe91c9
@formfcw
add tests for VUpload component to verify disabled state behavior
5765bf6
@formfcw
add tests for FilePreviewReplace component to verify disabled state b…
384759c 
…ehavior
@formfcw
Pascal the camel
9de8f98
@formfcw
add tests for SearchInput component to verify disabled state behavior
9faac6b
@formfcw
typo
9c8e4a5
@formfcw
Merge branch 'main' into florian/cms-1498-inconsistencies-in-the-disa…
c55a7d8 
…bled-state-of-interfaces
@formfcw
add tests for six interfaces to verify disabled state behavior
f8c3370
@formfcw
Merge branch 'main' into florian/cms-1498-inconsistencies-in-the-disa…
8e373e7 
…bled-state-of-interfaces
@formfcw
fix: correct hideChoices logic to account for nonEditable prop
a28538a
@formfcw
test: add unit tests for SelectMultipleCheckbox component
5a5f6e9
@formfcw
Merge branch 'main' into florian/cms-1498-inconsistencies-in-the-disa…
cc77739 
…bled-state-of-interfaces
@formfcw
test: add unit tests for InputHash component
402da66
@formfcw
fix: remove async from test cases
2ab3ef9
@formfcw
test: add unit tests for SelectRadio component
cf4c269
@formfcw
test: add unit tests for Tags component to verify rendering and disab…
fecf773 
…led state
@formfcw
Merge branch 'main' into florian/cms-1498-inconsistencies-in-the-disa…
2d85240 
…bled-state-of-interfaces
@formfcw
test: add unit tests for SelectDropdownM2O component to verify render…
11e17ad 
…ing and disabled state
AlexGaillard
AlexGaillard approved these changes Jan 20, 2026
View reviewed changes
Copy link
Member

@AlexGaillard AlexGaillard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆒🫘

@AlexGaillard AlexGaillard merged commit 1641743 into main Jan 20, 2026
68 of 69 checks passed
@AlexGaillard AlexGaillard deleted the florian/cms-1498-inconsistencies-in-the-disabled-state-of-interfaces branch January 20, 2026 14:11
@github-actions github-actions bot added this to the Next Release milestone Jan 20, 2026
@ComfortablyCoding ComfortablyCoding mentioned this pull request Jan 27, 2026
Merged
This was referenced Jan 30, 2026
Open
Closed
Closed
alexlebens pushed a commit to alexlebens/infrastructure that referenced this pull request Feb 5, 2026
@alexlebens
chore(deps): update directus/directus to v11.15.0 (#3752)
2bf0d6f 
This PR contains the following updates:

| Package | Update | Change |
|---|---|---|
| [directus/directus](https://github.com/directus/directus) | minor | `11.14.1` → `11.15.0` |

---

### Release Notes

<details>
<summary>directus/directus (directus/directus)</summary>

### [`v11.15.0`](https://github.com/directus/directus/releases/tag/v11.15.0)

[Compare Source](directus/directus@v11.14.1...v11.15.0)

##### ⚠️ Potential Breaking Changes

**Attached prompts, content items, and visual editor elements to AI Assistant Context ([#&#8203;26512](directus/directus#26512) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))**
To use this feature, update [@&#8203;directus/visual-editing](https://github.com/directus/visual-editing) to v1.2.0+ on your website.

##### ✨ New Features & Improvements

- **[@&#8203;directus/app](https://github.com/directus/app)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
  - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#&#8203;26512](directus/directus#26512) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#&#8203;26481](directus/directus#26481) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Added toggle to allow comparing revision to previous revision ([#&#8203;26480](directus/directus#26480) by [@&#8203;robluton](https://github.com/robluton))
  - Added relational field support on x-axis of bar chart ([#&#8203;26489](directus/directus#26489) by [@&#8203;JamesW1](https://github.com/JamesW1))
  - Added visual editing support to the live preview split pane, including display options menu, full-width mode with drag-to-expand, and quick access to the Visual Editor module. ([#&#8203;26463](directus/directus#26463) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Changed permission-blocked fields from disabled to non-editable appearance ([#&#8203;26572](directus/directus#26572) by [@&#8203;HZooly](https://github.com/HZooly))
- **[@&#8203;directus/api](https://github.com/directus/api)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
  - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#&#8203;26512](directus/directus#26512) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#&#8203;26481](directus/directus#26481) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
- **[@&#8203;directus/sdk](https://github.com/directus/sdk)**
  - Fixed race condition and allow accessing the connected state ([#&#8203;26511](directus/directus#26511) by [@&#8203;Nitwel](https://github.com/Nitwel))
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
- **[@&#8203;directus/system-data](https://github.com/directus/system-data)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
- **[@&#8203;directus/types](https://github.com/directus/types)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
  - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#&#8203;26481](directus/directus#26481) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
- **[@&#8203;directus/errors](https://github.com/directus/errors)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
- **[@&#8203;directus/env](https://github.com/directus/env)**
  - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#&#8203;26473](directus/directus#26473) by [@&#8203;gaetansenn](https://github.com/gaetansenn))
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
- **[@&#8203;directus/utils](https://github.com/directus/utils)**
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
- **[@&#8203;directus/ai](https://github.com/directus/ai)**
  - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#&#8203;26512](directus/directus#26512) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#&#8203;26481](directus/directus#26481) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
- **[@&#8203;directus/memory](https://github.com/directus/memory)**
  - Added distributed locking ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))

##### 🐛 Bug Fixes & Optimizations

- **[@&#8203;directus/app](https://github.com/directus/app)**
  - Replaced deprecated `ldapjs` with `ldapts` ([#&#8203;26363](directus/directus#26363) by [@&#8203;dstockton](https://github.com/dstockton))
  - Fixed an issue where the caret would jump to the end of the input in `v-template-input` when typing or updating content. ([#&#8203;26520](directus/directus#26520) by [@&#8203;mustafaazad03](https://github.com/mustafaazad03))
  - Fixed back button navigation on related items ([#&#8203;26553](directus/directus#26553) by [@&#8203;robluton](https://github.com/robluton))
  - Fixed table options menu clipping in markdown editor ([#&#8203;26487](directus/directus#26487) by [@&#8203;DamnItAzriel](https://github.com/DamnItAzriel))
  - Hide AI settings page when MCP and AI features are disabled through ENV ([#&#8203;26504](directus/directus#26504) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Updated dependency ([#&#8203;26518](directus/directus#26518) by [@&#8203;rijkvanzanten](https://github.com/rijkvanzanten))
  - Fixed inconsistent disabled state across interfaces ([#&#8203;26470](directus/directus#26470) by [@&#8203;formfcw](https://github.com/formfcw))
  - Fixed an issue where custom CSS classes applied to PrivateView were not rendered ([#&#8203;26523](directus/directus#26523) by [@&#8203;u12206050](https://github.com/u12206050))
  - Fixed WYSIWYG interface not rendering when field is named "tooltip" ([#&#8203;26581](directus/directus#26581) by [@&#8203;robluton](https://github.com/robluton))
  - Fixed issue preventing sidebar details from being fetched when navigating back ([#&#8203;26542](directus/directus#26542) by [@&#8203;robluton](https://github.com/robluton))
  - Fixed Vue warning by passing required prop to interfaces ([#&#8203;26506](directus/directus#26506) by [@&#8203;formfcw](https://github.com/formfcw))
  - Fixed hardcoded "Loading..." text in field tree by using translation key ([#&#8203;26526](directus/directus#26526) by [@&#8203;sinan-yildiz-marsus](https://github.com/sinan-yildiz-marsus))
  - Renamed AI Chat to AI Assistant ([#&#8203;26517](directus/directus#26517) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
- **[@&#8203;directus/api](https://github.com/directus/api)**
  - Improved error message for system field updates that are not schema.is\_indexed ([#&#8203;26548](directus/directus#26548) by [@&#8203;JamesW1](https://github.com/JamesW1))
  - Replaced deprecated `ldapjs` with `ldapts` ([#&#8203;26363](directus/directus#26363) by [@&#8203;dstockton](https://github.com/dstockton))
  - Changed users.last\_access display mode to absolute ([#&#8203;26548](directus/directus#26548) by [@&#8203;JamesW1](https://github.com/JamesW1))
- **[@&#8203;directus/system-data](https://github.com/directus/system-data)**
  - Added collaborative editing ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))
  - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#&#8203;26481](directus/directus#26481) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
  - Changed users.last\_access display mode to absolute ([#&#8203;26548](directus/directus#26548) by [@&#8203;JamesW1](https://github.com/JamesW1))
  - Renamed AI Chat to AI Assistant ([#&#8203;26517](directus/directus#26517) by [@&#8203;bryantgillespie](https://github.com/bryantgillespie))
- **[@&#8203;directus/env](https://github.com/directus/env)**
  - Fixed LDAP DN properties casted as arrays ([#&#8203;26579](directus/directus#26579) by [@&#8203;ComfortablyCoding](https://github.com/ComfortablyCoding))
- **[@&#8203;directus/memory](https://github.com/directus/memory)**
  - Handled empty buffers to prevent errors during race conditions or disconnects ([#&#8203;26172](directus/directus#26172) by [@&#8203;Nitwel](https://github.com/Nitwel))

##### 📦 Published Versions

- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/storage-driver-s3@&#8203;12.1.1`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`
- `@directus/[email protected]`

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4zLjYiLCJ1cGRhdGVkSW5WZXIiOiI0My4zLjYiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbImltYWdlIl19-->

Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3752
Co-authored-by: Renovate Bot <[email protected]>
Co-committed-by: Renovate Bot <[email protected]>
@AlexGaillard AlexGaillard mentioned this pull request Feb 16, 2026
Merged
3 tasks
@HZooly HZooly mentioned this pull request Feb 16, 2026
Closed
@formfcw formfcw mentioned this pull request Feb 18, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@robluton robluton robluton approved these changes

@AlexGaillard AlexGaillard AlexGaillard approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

v11.15.0

Development

Successfully merging this pull request may close these issues.

Inconsistencies in the disabled state of interfaces

4 participants

@formfcw @ComfortablyCoding @robluton @AlexGaillard