refactor: update select to not use button

[web-padawan]

Description

Updated vaadin-select-value-button to use mixins instead of extending vaadin-button directly.

Fixes #3607

Type of change

• Refactor

[vursen]

Regression: The select loses focus after pressing Enter or Space several times

Steps:

1. Open a page with the snippet below.
2. Set focus on the select with Tab.
3. Press Enter or Space several times.

Actual: The select component loses focus after you press an activation key several times.

Expected: The select component keeps focused regardless of how many times you press an activation key.

Recording:

Screen.Recording.2022-03-28.at.16.05.19.mov

Snippet:

<script type="module">
  import '@vaadin/select';
</script>

<vaadin-select label="New"></vaadin-select>

<script>
  const select = document.querySelector('vaadin-select');
  select.renderer = (root, _, model) => {
    root.innerHTML = `
      <vaadin-list-box>
        <vaadin-item value="xs" disabled>XS (out of stock)</vaadin-item>
        <vaadin-item value="s">S</vaadin-item>
        <vaadin-item value="m">M</vaadin-item>
        <vaadin-item value="l">L</vaadin-item>
        <vaadin-item value="xl">XL</vaadin-item>
      </vaadin-list-box>
    `;
  };
</script>

[web-padawan]

@vursen Updated the code to use ButtonMixin for providing common button functionality.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.1.0.alpha2 and is also targeting the upcoming stable 23.1.0 version.