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

Comparing version 4.2.0 to 4.2.1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "main": "vaadin-combo-box.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-combo-box-data-provider-mixin.js

@@ -151,2 +151,5 @@ /**
           }
+          if (!this.size) {
+            this.opened = false;
+          }
         }
@@ -153,0 +156,0 @@ };

src/vaadin-combo-box-dropdown-wrapper.js

@@ -32,28 +32,31 @@ /**
     return html`
-    <style>
-      #scroller {
-        overflow: auto;
+    <!-- Stamping the content is postponed until the combo box is opened for the first time -->
+    <template id="dropdown-template" is="dom-if">
+      <vaadin-combo-box-dropdown id="dropdown" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight" theme="[[theme]]">
+        <template>
+          <style>
+            #scroller {
+              overflow: auto;
 
-        /* Fixes item background from getting on top of scrollbars on Safari */
-        transform: translate3d(0, 0, 0);
+              /* Fixes item background from getting on top of scrollbars on Safari */
+              transform: translate3d(0, 0, 0);
 
-        /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
-        -webkit-overflow-scrolling: touch;
+              /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
+              -webkit-overflow-scrolling: touch;
 
-        /* Fixes scrollbar disappearing when "Show scroll bars: Always" enabled in Safari */
-        box-shadow: 0 0 0 white;
-      }
-    </style>
-    <vaadin-combo-box-dropdown id="dropdown" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight" theme="[[theme]]">
-      <template>
-        <div id="scroller" on-click="_stopPropagation">
-          <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
-            <template>
-              <vaadin-combo-box-item on-click="_onItemClick" index="[[__requestItemByIndex(item, index)]]" item="[[item]]" label="[[getItemLabel(item)]]" selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
-              </vaadin-combo-box-item>
-            </template>
-          </iron-list>
-        </div>
-      </template>
-    </vaadin-combo-box-dropdown>
+              /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+              box-shadow: 0 0 0 white;
+            }
+          </style>
+          <div id="scroller" on-click="_stopPropagation">
+            <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
+              <template>
+                <vaadin-combo-box-item on-click="_onItemClick" index="[[__requestItemByIndex(item, index)]]" item="[[item]]" label="[[getItemLabel(item)]]" selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
+                </vaadin-combo-box-item>
+              </template>
+            </iron-list>
+          </div>
+        </template>
+      </vaadin-combo-box-dropdown>
+    </template>
 `;
@@ -155,2 +158,9 @@ }
   _openedChanged(opened, items, loading) {
+    if (!this.$.dropdown) {
+      if (!opened) {
+        return;
+      } else {
+        this._initDropdown();
+      }
+    }
     // Do not attach if no items
@@ -161,4 +171,18 @@ // Do not dettach if opened but user types an invalid search
 
-  ready() {
-    super.ready();
+  _initDropdown() {
+    const template = this.shadowRoot.querySelector('#dropdown-template');
+    template.if = true;
+    template.render();
+
+    this.$.dropdown = this.shadowRoot.querySelector('#dropdown');
+
+    this._templateChanged();
+    this._loadingChanged(this.loading);
+
+    this.$.dropdown.$.overlay.addEventListener('touchend', e => this._fireTouchAction(e));
+    this.$.dropdown.$.overlay.addEventListener('touchmove', e => this._fireTouchAction(e));
+
+    // Prevent blurring the input when clicking inside the overlay.
+    this.$.dropdown.$.overlay.addEventListener('mousedown', e => e.preventDefault());
+
     // IE11: when scrolling with mouse, the focus goes to the scroller.
@@ -170,11 +194,9 @@ // This causes the overlay closing due to defocusing the input field.
     }
-
-    this.$.dropdown.$.overlay.addEventListener('touchend', e => this._fireTouchAction(e));
-    this.$.dropdown.$.overlay.addEventListener('touchmove', e => this._fireTouchAction(e));
-
-    // Prevent blurring the input when clicking inside the overlay.
-    this.$.dropdown.$.overlay.addEventListener('mousedown', e => e.preventDefault());
   }
 
   _templateChanged(e) {
+    if (!this.$.dropdown) {
+      return;
+    }
+
     this._selector = this.$.dropdown.$.overlay.content.querySelector('#selector');
@@ -185,2 +207,6 @@ this._scroller = this.$.dropdown.$.overlay.content.querySelector('#scroller');
   _loadingChanged(loading) {
+    if (!this.$.dropdown) {
+      return;
+    }
+
     if (loading) {
@@ -187,0 +213,0 @@ this.$.dropdown.$.overlay.setAttribute('loading', '');

src/vaadin-combo-box-dropdown.js

@@ -71,3 +71,6 @@ /**
     return {
-      opened: Boolean,
+      opened: {
+        type: Boolean,
+        observer: '_openedChanged'
+      },
 
@@ -101,6 +104,2 @@ template: {
 
-  static get observers() {
-    return ['_openedChanged(opened)'];
-  }
-
   constructor() {
@@ -155,3 +154,7 @@ super();
 
-  _openedChanged(opened) {
+  _openedChanged(opened, oldValue) {
+    if (!!opened === !!oldValue) {
+      return;
+    }
+
     if (opened) {
@@ -158,0 +161,0 @@ this.$.overlay.style.position = this._isPositionFixed(this.positionTarget) ? 'fixed' : 'absolute';

src/vaadin-combo-box-mixin.js

@@ -229,3 +229,3 @@ /**
       // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (e.relatedTarget === this.$.overlay.$.dropdown.$.overlay) {
+      if (this.$.overlay.$.dropdown && e.relatedTarget === this.$.overlay.$.dropdown.$.overlay) {
         e.composedPath()[0].focus();
@@ -232,0 +232,0 @@ return;

src/vaadin-combo-box.js

@@ -255,3 +255,3 @@ /**
   static get version() {
-    return '4.2.0';
+    return '4.2.1';
   }
@@ -258,0 +258,0 @@

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

@@ -5,5 +5,5 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
+const $_documentContainer = html`<dom-module id="lumo-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
   <template>
@@ -10,0 +10,0 @@ <style include="lumo-overlay lumo-menu-overlay-core">

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

@@ -5,5 +5,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-item" theme-for="vaadin-combo-box-item">
+const $_documentContainer = html`<dom-module id="lumo-combo-box-item" theme-for="vaadin-combo-box-item">
   <template>
@@ -10,0 +10,0 @@ <style include="lumo-item">

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

 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-combo-box" theme-for="vaadin-combo-box">
+const $_documentContainer = html`<dom-module id="lumo-combo-box" theme-for="vaadin-combo-box">
   <template>
@@ -8,0 +8,0 @@ <style include="lumo-field-button">

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

 import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="material-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
+const $_documentContainer = html`<dom-module id="material-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
   <template>
@@ -6,0 +6,0 @@ <style include="material-menu-overlay">

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

@@ -5,5 +5,5 @@ import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="material-combo-box-item" theme-for="vaadin-combo-box-item">
+const $_documentContainer = html`<dom-module id="material-combo-box-item" theme-for="vaadin-combo-box-item">
   <template>
@@ -10,0 +10,0 @@ <style include="material-item">

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

@@ -5,5 +5,5 @@ import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/vaadin-material-styles/mixins/field-button.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="material-combo-box" theme-for="vaadin-combo-box">
+const $_documentContainer = html`<dom-module id="material-combo-box" theme-for="vaadin-combo-box">
   <template>
@@ -10,0 +10,0 @@ <style include="material-field-button">

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

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

106056

increased by0.83%

Lines of code

2569

increased by1.06%

No dependency changes