@vaadin/select 23.1.1 → 23.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "23.1.1",
+  "version": "23.1.4",
   "publishConfig": {
     "access": "public"
   },
@@ -36,25 +36,25 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^23.1.1",
-    "@vaadin/component-base": "^23.1.1",
-    "@vaadin/field-base": "^23.1.1",
-    "@vaadin/input-container": "^23.1.1",
-    "@vaadin/item": "^23.1.1",
-    "@vaadin/list-box": "^23.1.1",
-    "@vaadin/lit-renderer": "^23.1.1",
-    "@vaadin/vaadin-list-mixin": "^23.1.1",
-    "@vaadin/vaadin-lumo-styles": "^23.1.1",
-    "@vaadin/vaadin-material-styles": "^23.1.1",
-    "@vaadin/vaadin-overlay": "^23.1.1",
-    "@vaadin/vaadin-themable-mixin": "^23.1.1"
+    "@vaadin/button": "^23.1.4",
+    "@vaadin/component-base": "^23.1.4",
+    "@vaadin/field-base": "^23.1.4",
+    "@vaadin/input-container": "^23.1.4",
+    "@vaadin/item": "^23.1.4",
+    "@vaadin/list-box": "^23.1.4",
+    "@vaadin/lit-renderer": "^23.1.4",
+    "@vaadin/vaadin-list-mixin": "^23.1.4",
+    "@vaadin/vaadin-lumo-styles": "^23.1.4",
+    "@vaadin/vaadin-material-styles": "^23.1.4",
+    "@vaadin/vaadin-overlay": "^23.1.4",
+    "@vaadin/vaadin-themable-mixin": "^23.1.4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.1",
+    "@vaadin/polymer-legacy-adapter": "^23.1.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "390458d6519433a2dd502cef90da48e84573a275"
+  "gitHead": "0a82302064f1276a000f0cbd810076539407d133"
 }

package/src/vaadin-select.d.ts

@@ -6,6 +6,7 @@
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -164,7 +165,9 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
+declare class Select extends DelegateFocusMixin(
+  DelegateStateMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(HTMLElement))))),
+) {
   /**
    * An array containing items that will be rendered as the options of the select.
    *
@@ -245,23 +248,16 @@ declare class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixi
    */
   requestContentUpdate(): void;
 
-  /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-   *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
-   */
-  validate(): boolean;
-
   addEventListener<K extends keyof SelectEventMap>(
     type: K,
     listener: (this: Select, ev: SelectEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof SelectEventMap>(
     type: K,
     listener: (this: Select, ev: SelectEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-select.js

@@ -14,6 +14,7 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { fieldShared } from '@vaadin/field-base/src/styles/field-shared-styles.js';
 import { inputFieldContainer } from '@vaadin/field-base/src/styles/input-field-container-styles.js';
@@ -131,8 +132,11 @@ registerStyles('vaadin-select', [fieldShared, inputFieldContainer], { moduleId:
  * @mixes SlotMixin
  * @mixes FieldMixin
  * @mixes DelegateFocusMixin
+ * @mixes DelegateStateMixin
  */
-class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
+class Select extends DelegateFocusMixin(
+  DelegateStateMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(PolymerElement))))),
+) {
   static get is() {
     return 'vaadin-select';
   }
@@ -302,10 +306,13 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     };
   }
 
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'invalid'];
+  }
+
   static get observers() {
     return [
       '_updateAriaExpanded(opened)',
-      '_updateAriaRequired(required)',
       '_updateSelectedItem(value, _items, placeholder)',
       '_rendererChanged(renderer, _overlayElement)',
     ];
@@ -345,11 +352,11 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     if (this._valueButton) {
       this._valueButton.setAttribute('aria-labelledby', `${this._labelId} ${this._fieldId}`);
 
-      this._updateAriaRequired(this.required);
       this._updateAriaExpanded(this.opened);
 
       this._setFocusElement(this._valueButton);
       this.ariaTarget = this._valueButton;
+      this.stateTarget = this._valueButton;
 
       this._valueButton.addEventListener('keydown', this._boundOnKeyDown);
     }
@@ -568,13 +575,6 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
-  /** @private */
-  _updateAriaRequired(required) {
-    if (this._valueButton) {
-      this._valueButton.setAttribute('aria-required', required ? 'true' : 'false');
-    }
-  }
-
   /** @private */
   _updateAriaLive(ariaLive) {
     if (this._valueButton) {
@@ -673,8 +673,9 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
   /** @private */
   _updateSelectedItem(value, items) {
     if (items) {
+      const valueAsString = value == null ? value : value.toString();
       this._menuElement.selected = items.reduce((prev, item, idx) => {
-        return prev === undefined && item.value === value ? idx : prev;
+        return prev === undefined && item.value === valueAsString ? idx : prev;
       }, undefined);
       if (!this._selectedChanging) {
         this._valueChanging = true;
@@ -710,12 +711,12 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Returns true if the current value satisfies all constraints (if any)
    *
-   * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+   * @return {boolean}
    */
-  validate() {
-    return !(this.invalid = !(this.disabled || !this.required || this.value));
+  checkValidity() {
+    return this.disabled || !this.required || !!this.value;
   }
 
   /**