⚓ T380452 MultiselectLookup: readonly prop is not fully working

MultiselectLookup: readonly prop is not fully working
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Sfaci
	Nov 21 2024, 10:26 AM

Description

After having this conversation via Slack I was told to expose the use case/issue as a ticket here to explore how to address it:

It seems that MultiselectLookup codex component supports the readonly property but, when used, only the TextInput part of that component adapts its behaviour to not allow typing anything there. The dropdown list doesn't appear which is expected. But the Chips that are already added can be removed which, in the end, allows to edit the component even when readonly is true.

In the attached video there are a couple of MultiselectLookup set with readonly=true where user cannot add new items but can remove and even change the existing ones.

Screen Recording 2024-11-21 at 11.05.53.gif (314×764 px, 3 MB)

The use case I'm trying to implement would be a readonly MultiselectLookup so users can see properly the selected values without being able to modify/delete any of them. At this time the only way to do that is disabling completely the component which looks worse.

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v1.17.0 to v1.18.0	mediawiki/core	master	+286 -148
	MultiselectLookup, ChipInput, InputChip: add readonly and disabled support	design/codex	main	+157 -10

Customize query in gerrit

Related Objects

Mentioned In: T382340: readonly not supported on Select and Lookup components
T381710: [placeholder] MultiselectLookup: improve tab order and aria attributes
Mentioned Here: T381710: [placeholder] MultiselectLookup: improve tab order and aria attributes

Event Timeline

Sfaci created this task.Nov 21 2024, 10:26 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 21 2024, 10:26 AM

Aklapper added a project: Codex.Nov 21 2024, 10:31 AM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptNov 21 2024, 10:31 AM

Sfaci renamed this task from readonly feature for MultiselectLookup codex component not fully working to readonly property for MultiselectLookup codex component is not fully working.Nov 21 2024, 10:37 AM

Sfaci added a project: Experimentation Lab (Data Products Sprint 22).

Sfaci updated the task description. (Show Details)

Sfaci moved this task from Sprint Backlog to Radar on the Experimentation Lab (Data Products Sprint 22) board.

CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.Nov 21 2024, 9:53 PM

CCiufo-WMF triaged this task as High priority.Nov 21 2024, 10:06 PM

CCiufo-WMF changed the subtype of this task from "Task" to "Bug Report".

CCiufo-WMF renamed this task from readonly property for MultiselectLookup codex component is not fully working to MultiselectLookup: readonly prop is not fully working.Nov 25 2024, 3:41 PM

lwatson edited projects, added Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)); removed Design-System-Team.Nov 25 2024, 6:34 PM

lwatson set the point value for this task to 1.

Milimetric edited projects, added Experimentation Lab (Data Products Sprint 23); removed Experimentation Lab (Data Products Sprint 22).Mon, Dec 2, 3:09 PM

Milimetric moved this task from Sprint Backlog to Radar on the Experimentation Lab (Data Products Sprint 23) board.

lwatson claimed this task.Mon, Dec 2, 4:12 PM

We need to update the design and functionality of the ChipInput component to support a readonly state for the MultiselectLookup. The MultiselectLookup component consists of a ChipInput and a Menu. The ChipInput is composed of InputChip elements and an <input> element.

Currently, when the MultiselectLookup is set to readonly, the readonly attribute is passed to the <input> element via the useSplitAttributes composable (refer to inheriting attributes for more info about this composable). The same occurs when disabled, the disabled attribute is passed to the <input>. However, the handling of readonly and disabled behavior is incomplete in the code. For instance, when readonly or disabled, certain events should be blocked to prevent unintended modifications/deletions to the chips.

I left some assumptions and questions below about the readonly and disabled behavior, and design considerations.

Disabled Behavior:

The user should not be able to interact with chips (e.g., clicking or removing chips) when the component is disabled.

Readonly Behavior:

The user should not be allowed to click or remove chips when the component is readonly.
The user should still be able to focus on the MultiselectLookup. (Refer to readonly attribute interactions)
Question: Should focusing on individual chips also be supported in readonly mode?

Design Considerations:

Discuss and finalize styles for readonly to visually distinguish it from disabled and editable states.
Question: Should the input styles be similar to TextInput?

lwatson moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)) board.Tue, Dec 3, 7:32 PM

Change #1100477 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] MultiselectLookup, ChipInput, InputChip: add readonly and disabled support

https://gerrit.wikimedia.org/r/1100477

gerritbot added a project: Patch-For-Review.Wed, Dec 4, 3:59 PM

lwatson moved this task from In Progress to Design Review on the Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)) board.Wed, Dec 4, 7:01 PM

We’ll follow up in T381710 to improve the tab order and aria attributes (aria-hidden, aria-readonly, aria-description) that arose when adding readonly and disabled support.