lion/packages/ui
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
..
_legacy-changelogs feat: move all web pkgs into a single npm pkg @lion/ui 2022-10-31 11:15:03 +01:00
components fix(combobox): add support for disabled and readonly states 2025-07-28 16:29:32 +02:00
exports fix: make web-test-runner using documentOrShadowRoot.activeElement debuggable 2024-11-21 09:01:13 +01:00
scripts fix(providence): use globby again 2025-03-20 10:29:39 +01:00
.gitignore feat: expose vscode custom-data 2023-06-08 17:22:58 +02:00
CHANGELOG.md Version Packages (#2540) 2025-07-17 16:47:11 +02:00
package.json fix(dedupe-mixin): resolve version conflict between v1 and v2 2025-07-26 13:02:39 +02:00
README.md chore: add README for lion/ui package 2023-02-28 15:18:09 +01:00
tsconfig-check-only.json chore: apply types-correct in ui pkg 2022-11-23 16:14:18 +01:00
tsconfig.json feat: introduce wireit and ts use node16 resolution 2022-11-07 11:39:40 +01:00