Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Item with '' as value is rendered as disabled in a select since Vaadin 22 alpha 3 #2808

Closed
Artur- opened this issue Oct 8, 2021 · 1 comment · Fixed by #2877
Closed

Item with '' as value is rendered as disabled in a select since Vaadin 22 alpha 3 #2808

Artur- opened this issue Oct 8, 2021 · 1 comment · Fixed by #2877
Assignees
Labels
a11y Accessibility issue regression Sometimes we make things break vaadin-select

Comments

@Artur-
Copy link
Member

Artur- commented Oct 8, 2021

Description

A select looks disabled when the value is set to ''. There is no has-value attribute set on the select.
This was introduced in V22 alpha 3.

Expected outcome

A Select looks the same regardless of if the value is 'foo' or ''.

Minimal reproducible example

import '@vaadin/vaadin-item/vaadin-item';
import '@vaadin/vaadin-list-box/vaadin-list-box';
import '@vaadin/vaadin-select/vaadin-select';
import { html, LitElement, render } from 'lit';
import { customElement } from 'lit/decorators.js';
import { guard } from 'lit/directives/guard.js';

@customElement('select-basic')
export class Example extends LitElement {

  render() {
    return html`
      <vaadin-select
        value="recent"
        label="Sort by"
        .renderer="${guard(
          [],
          () => (root: HTMLElement) =>
            render(
              html`
                <vaadin-list-box>
                  <vaadin-item value="">All of them</vaadin-item>
                  <vaadin-item value="one">One</vaadin-item>
                  <vaadin-item value="two">Two</vaadin-item>
                  <vaadin-item value="three">Three</vaadin-item>
                </vaadin-list-box>
              `,
              root
            )
        )}"
      ></vaadin-select>
    `;
  }
}

Screenshot 2021-10-08 at 14 34 51
Screenshot 2021-10-08 at 14 35 00
Screenshot 2021-10-08 at 14 34 56

@web-padawan web-padawan added a11y Accessibility issue regression Sometimes we make things break vaadin-select labels Oct 8, 2021
@web-padawan
Copy link
Member

Added this to the upcoming spring. This is a regression that we need to fix ASAP.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility issue regression Sometimes we make things break vaadin-select
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants