lion/docs/components
sainzrow 765a1a298c
fix(combobox): add support for disabled and readonly states
* fix(combobox): don't use setAttribute for disabled/enabled attributes

How to reproduce this bug:

1. Go to https://lion.js.org/components/combobox/overview/ or just use the combobox in your application.
2. Inspect the combobox in the browser. Click on the `<lion-combobox>` element at the DOM inspector.
3. At the JavaScript console, print `$0.disabled`. Observe it is currently `false`, and the user can interact with it normally.
4. (optional) Run `$0.disabled =true`. Observe the user cannot interact with it anymore. That's expected.
5. Run `$0.disabled = false`.

BUG: The user cannot interact with the combobox anymore, despite `disabled` being false.

Root cause: If you inspect the `<input>` element, you can see it has `disabled="false"`.

The [specs](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute) say:

> The `disabled` content attribute is a [boolean attribute](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute).
>
> A form control is **disabled** if any of the following are true:
> * the element is a `button`, `input`, `select`, `textarea`, or form-associated custom element, and the `disabled` attribute is specified on this element (regardless of its value);

And [also](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute):

> A number of attributes are **boolean attributes**. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Thanks to @thematho for finding the root cause.

* fix(combobox): add support for disabled and readonly states with corresponding tests

* Update packages/ui/components/combobox/src/LionCombobox.js

Co-authored-by: Thijs Louisse <t_louisse@hotmail.com>

* Update packages/ui/components/combobox/src/LionCombobox.js

Co-authored-by: Thijs Louisse <t_louisse@hotmail.com>

* Update packages/ui/components/combobox/src/LionCombobox.js

Co-authored-by: Thijs Louisse <t_louisse@hotmail.com>

* fix(combobox): added accessibility tests

---------

Co-authored-by: Denilson Sá Maia <denilsonsa@gmail.com>
Co-authored-by: Thijs Louisse <t_louisse@hotmail.com>
2025-07-28 16:29:32 +02:00
..
accordion feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
button feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
calendar feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
checkbox-group feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
collapsible feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
combobox fix(combobox): add support for disabled and readonly states 2025-07-28 16:29:32 +02:00
dialog feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
drawer feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
fieldset feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
form feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
icon feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-amount feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-date feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-datepicker feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-email feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-file feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-iban feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-range feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-stepper feat(input-stepper): align value with step size (#2511) 2025-05-14 16:46:00 +02:00
input-tel feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
input-tel-dropdown feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
listbox feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
pagination feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
progress-indicator feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
radio-group feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
select feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
select-rich feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
steps feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
switch feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
tabs feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
textarea feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
tooltip feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
index.11tydata.cjs chore: improve social media images 2021-03-15 16:17:44 +01:00
index.md feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00