lion/packages/ui/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 chore: update/clean devDependencies for better security and perf 2024-10-16 14:14:26 +02:00
button Set aria-disabled to true or delete it (#2452) 2025-01-22 12:16:56 +01:00
calendar feat: add Turkish (tr) translations to form-core, input-datepicker & pagination (#2516) 2025-05-15 16:56:48 +02:00
checkbox-group Fix indeterminate checkbox edge cases (#2458) 2025-02-04 11:08:57 +01:00
collapsible Fix/reuse UUID missing parent callback disabled property (#2090) 2023-11-27 14:07:18 +01:00
combobox fix(combobox): add support for disabled and readonly states 2025-07-28 16:29:32 +02:00
core fix(ui/core): rerender direct host child with right slot attr when root is switched 2025-01-21 10:39:52 +01:00
dialog feat(dialog): add is-alert-dialog option (#2445) 2025-01-21 09:21:34 +01:00
drawer Fix/reuse UUID missing parent callback disabled property (#2090) 2023-11-27 14:07:18 +01:00
fieldset chore: introduce a component src folder 2022-10-31 16:55:07 +01:00
form fix: make web-test-runner using documentOrShadowRoot.activeElement debuggable 2024-11-21 09:01:13 +01:00
form-core fix(form-core): don't remove event listeners if _focusableNode was not set 2025-07-26 15:05:49 +02:00
form-integrations/test chore: clean test logs 2025-01-07 09:39:29 +01:00
helpers update prettier 2024-05-17 21:43:23 +02:00
icon fix(ui): improve test experience in dev-mode 2024-10-30 15:51:55 +01:00
input Revert "fix: create exports for test-suites and test-helpers (#2010)" (#2012) 2023-06-13 15:14:47 +02:00
input-amount fix: editing negative numbers (#2538) 2025-07-17 14:20:26 +02:00
input-date fix(localize): make use of formatDate locale option to parse the date correctly (#2270) 2024-04-23 14:42:00 +02:00
input-datepicker feat: add Turkish (tr) translations to form-core, input-datepicker & pagination (#2516) 2025-05-15 16:56:48 +02:00
input-email feat(@lion/ui): localize side effect free internally 2023-02-01 16:06:30 +01:00
input-file fix(input-file): set buttonLabel initially (#2524) 2025-05-21 09:54:39 +02:00
input-iban chore: update to lit3 and other dependencies 2024-03-27 18:00:34 +01:00
input-range fix(input-range): add screen-reader labels for minimum and maximum value 2024-02-19 15:59:56 +01:00
input-stepper chore(input-stepper): small edit after previous input-stepper fix (#2523) 2025-05-15 08:05:51 +02:00
input-tel feat(input-tel): use first preferred region to set a default region 2025-07-03 21:00:05 +02:00
input-tel-dropdown feat(input-tel): use first preferred region to set a default region 2025-07-03 21:00:05 +02:00
listbox chore: update portal url 2024-10-29 12:15:39 +01:00
localize fix: bug that accepted 3 digit year (#2489) 2025-03-13 08:34:56 +01:00
overlays chore: test for disconnected overlay 2025-07-28 15:58:44 +02:00
pagination feat: add Turkish (tr) translations to form-core, input-datepicker & pagination (#2516) 2025-05-15 16:56:48 +02:00
progress-indicator fix(ui): improve test experience in dev-mode 2024-10-30 15:51:55 +01:00
radio-group Fix(lion-radio-group): Resetting a group containing options with formatters (#2101) 2023-10-18 17:10:26 +02:00
select feat(form-core): add select and upload specific required messages 2024-03-06 15:52:36 +01:00
select-rich fix(select-rich): block arrow key interaction when singleOption is set (#2474) 2025-02-13 14:35:52 +01:00
steps fix(ui): improve test experience in dev-mode 2024-10-30 15:51:55 +01:00
switch chore: add remaining internal usages of isActiveElement in tests 2024-11-28 17:19:16 +01:00
tabs chore: add remaining internal usages of isActiveElement in tests 2024-11-28 17:19:16 +01:00
textarea fix(textarea): fix box-sizing inside tests to make it work cross browser (#2210) 2024-03-27 18:02:16 +01:00
tooltip fix(ui): improve test experience in dev-mode 2024-10-30 15:51:55 +01:00
validate-messages feat: add Turkish (tr) translations to form-core, input-datepicker & pagination (#2516) 2025-05-15 16:56:48 +02:00