Commit graph

23 commits

Author SHA1 Message Date
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
gerjanvangeest
23cd9841ed
fix(combobox): do not submit form if overlay of combobox is opened and ENTER is hit (#2481) 2025-04-08 15:07:42 +02:00
Oleksii Kadurin
ebd31ed90a
Add tests for combobox (#2491)
add a test for combobox
2025-03-17 10:49:04 +01:00
Thijs Louisse
8377e8d17d fix(overlays): rework setup and teardown logic of OverlayMixin
Add a failing test

chore: broken test fix

chore: harden overlay teardown tests and cleanup select-rich
2025-01-13 15:33:28 +01:00
Oleksii Kadurin
e11788492f
do not show overlay when _showOverlayCondition is "false" (#2421)
fix: show overlay based on subclassers' _showOverlayCondition
2024-12-12 17:03:30 +01:00
Thijs Louisse
3e13adedc2
fix: make web-test-runner using documentOrShadowRoot.activeElement debuggable 2024-11-21 09:01:13 +01:00
Thijs Louisse
dbb964077f chore: update/clean devDependencies for better security and perf 2024-10-16 14:14:26 +02:00
Oleksii Kadurin
27af6be0db
fix: tests for keyboard typing (#2371) 2024-10-14 16:03:13 +02:00
gerjanvangeest
02a9427a7d
fix(combobox): when multiple choice reset all listbox options on select (#2332)
* fix(combobox): when multiple choice reset all listbox options on select

* Apply suggestions from code review

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>

* chore: clear options also on click

* chore: adopt code to show list when only when showAllOnEmpty is true

---------

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
2024-08-27 10:48:12 +02:00
gerjanvangeest
b50b960daa
fix(combobox): update the code to when show and hide the overlay, to be more robust (#2301) 2024-06-10 15:10:08 +02:00
Kristján Oddsson
c7c83d1d8b
update prettier
* update prettier to v3.x
* update prettify in @lion/nodejs-helpers to match updated prettier
* remove redundant await for promise
* remove `@types/prettier` as it's now included in `prettier`
* format lit template snippets with `jsx`
2024-05-17 21:43:23 +02:00
Guilherme Amorim
be4e25a108
feat: support (multiselect) choice-groups with allow-custom-choice 2023-11-08 15:05:09 +01:00
Oleksii Kadurin
c459ded9d8
fix: autocomplete for combobox (reset activeIndex when needed) 2023-11-07 12:58:59 +01:00
Guilherme Amorim
7235a4f703
fix(lion-combobox): The event emitted during clear has stale value (#2104) 2023-10-18 17:00:30 +02:00
Gyulai Levente
dcf3a4b0bd
fix(combobox): Fix search issues when modifying the middle of the input word (#2085) 2023-10-17 13:52:10 +02:00
gerjanvangeest
dbc3fc2db6
fix(combobox): submit form on [Enter] (#2005)
fix(combobox): submit form on [Enter]
2023-06-08 18:14:14 +02:00
gvangeest
ddea63b381 fix(combobox): update option list after clear 2023-03-22 13:07:34 +01:00
gerjanvangeest
a2b81b2693
feat(combobox): add requireOptionMatch flag and MatchesOption validator
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
2023-03-16 18:18:40 +01:00
gvangeest
4226a0144c fix(combobox): add translations 2023-02-28 15:03:55 +01:00
gvangeest
943618fdcb fix(combobox): fix direct open and closing of the overlay on focus of empty input when showAllOnEmpty 2023-02-23 12:39:36 +01:00
gvangeest
1c18057cee fix(combobox): make the first occurrence of a string highlighted, instead of the last 2023-02-15 08:47:32 +01:00
Thomas Allmer
c1982965c3 feat: introduce wireit and ts use node16 resolution 2022-11-07 11:39:40 +01:00
Thomas Allmer
8114bae86f chore: rename ui/src to components 2022-10-31 16:55:07 +01:00
Renamed from packages/ui/src/combobox/test/lion-combobox.test.js (Browse further)