@vaadin/vaadin-combo-box - npm Package Compare versions

Comparing version 4.2.8 to 5.0.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.2.8",
+  "version": "5.0.0-alpha1",
   "main": "vaadin-combo-box.js",
@@ -40,3 +40,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-overlay": "^3.2.0",
-    "@vaadin/vaadin-text-field": "^2.1.1",
+    "@vaadin/vaadin-text-field": "^2.3.0",
     "@vaadin/vaadin-themable-mixin": "^1.3.2",
@@ -43,0 +43,0 @@ "@vaadin/vaadin-lumo-styles": "^1.1.1",

src/vaadin-combo-box-light.js

@@ -70,2 +70,8 @@ /**
     return html`
+    <style>
+      :host([opened]) {
+        pointer-events: auto;
+      }
+    </style>
+
     <slot></slot>
@@ -109,2 +115,10 @@
     this._clearElement = this.querySelector('.clear-button');
+
+    if (this._clearElement) {
+      this._clearElement.addEventListener('mousedown', e => {
+        e.preventDefault(); // Prevent native focus changes
+        // _focusableElement is needed for paper-input
+        (this.inputElement._focusableElement || this.inputElement).focus();
+      });
+    }
   }
@@ -111,0 +125,0 @@

src/vaadin-combo-box.js

@@ -139,3 +139,2 @@ /**
  * `text-field` | The text field
- * `clear-button` | The clear button
  * `toggle-button` | The toggle button
@@ -209,14 +208,7 @@ *
       }
-
-      :host([disabled]) [part="clear-button"],
-      :host([readonly]) [part="clear-button"],
-      :host(:not([has-value])) [part="clear-button"] {
-        display: none;
-      }
     </style>
 
-    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="{{_inputElementValue}}" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged" theme\$="[[theme]]">
+    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="{{_inputElementValue}}" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged" clear-button-visible="[[clearButtonVisible]]" theme\$="[[theme]]">
       <slot name="prefix" slot="prefix"></slot>
 
-      <div part="clear-button" id="clearButton" slot="suffix" role="button" aria-label="Clear"></div>
       <div part="toggle-button" id="toggleButton" slot="suffix" role="button" aria-label="Toggle"></div>
@@ -244,3 +236,3 @@
   static get version() {
-    return '4.2.8';
+    return '5.0.0-alpha1';
   }
@@ -310,2 +302,10 @@
         value: false
+      },
+
+      /**
+       * Set to true to display the clear icon which clears the input.
+       */
+      clearButtonVisible: {
+        type: Boolean,
+        value: false
       }
@@ -334,6 +334,21 @@ };
 
-    this._nativeInput = this.$.input.focusElement;
+    this._nativeInput = this.inputElement.focusElement;
     this._toggleElement = this.$.toggleButton;
-    this._clearElement = this.$.clearButton;
+    this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]');
 
+    // Stop propagation of Esc in capturing phase so that
+    // vaadin-text-field will not handle Esc as a shortcut
+    // to clear the value.
+    // We need to set this listener for "this.inputElement"
+    // instead of just "this", otherwise keyboard navigation behaviour
+    // breaks a bit on Safari and some related tests fail.
+    this.inputElement.addEventListener('keydown', e => {
+      if (this._isEventKey(e, 'esc')) {
+        this._stopPropagation(e);
+        // Trigger _onEscape method of vaadin-combo-box-mixin because
+        // bubbling phase is not reached.
+        this._onEscape(e);
+      }
+    }, true);
+
     this._nativeInput.setAttribute('role', 'combobox');
@@ -340,0 +355,0 @@ this._nativeInput.setAttribute('aria-autocomplete', 'list');

theme/lumo/vaadin-combo-box-styles.js

@@ -16,6 +16,2 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
       }
-
-      [part="clear-button"]::before {
-        content: var(--lumo-icons-cross);
-      }
     </style>
@@ -22,0 +18,0 @@ </template>

theme/material/vaadin-combo-box-styles.js

@@ -23,6 +23,2 @@ import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
       }
-
-      [part="clear-button"]::before {
-        content: var(--material-icons-clear);
-      }
     </style>
@@ -29,0 +25,0 @@ </template>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107493

increased by0.75%

Lines of code

2606

increased by0.77%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-text-field@^2.3.0