* 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> |
||
|---|---|---|
| .. | ||
| src | ||
| extensions.md | ||
| index.md | ||
| overview.md | ||
| use-cases.md | ||