lion/docs
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
..
_assets chore: cross-root-aria docs (#2107) 2023-10-23 11:46:40 +02:00
_data chore: set correct locale in portal 2022-05-17 11:38:32 +02:00
_includes/_joiningBlocks feat: move all web pkgs into a single npm pkg @lion/ui 2022-10-31 11:15:03 +01:00
about chore: upgrade node version 2022-02-02 13:57:31 +01:00
blog chore: update portal url 2024-10-29 12:15:39 +01:00
components fix(combobox): add support for disabled and readonly states 2025-07-28 16:29:32 +02:00
fundamentals chore: improve [slot=label] example 2025-07-26 12:38:14 +02:00
guides feat: migrated the navigation metadata from inline MD title decorations to frontmatter 2025-03-19 10:08:22 +01:00
404.md feat: as BREAKING CHANGE add exports & convert to static docs page 2021-03-15 15:22:37 +01:00
browserconfig.xml feat: as BREAKING CHANGE add exports & convert to static docs page 2021-03-15 15:22:37 +01:00
favicon.ico chore: update logo 2021-05-12 15:19:18 +02:00
index.11tydata.cjs chore: improve social media images 2021-03-15 16:17:44 +01:00
index.md feat: as BREAKING CHANGE add exports & convert to static docs page 2021-03-15 15:22:37 +01:00
simulator.md feat: add simulator to docs 2021-04-21 10:44:21 +02:00
webmanifest.json feat: as BREAKING CHANGE add exports & convert to static docs page 2021-03-15 15:22:37 +01:00