@vaadin/vaadin-select 2.4.3 → 2.4.4

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-select",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-select",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "main": "vaadin-select.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

package/src/vaadin-select-overlay.js

@@ -15,6 +15,22 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-select-overlay-styles" t
         align-items: flex-start;
         justify-content: flex-start;
       }
+
+      :host([bottom-aligned]) {
+        justify-content: flex-end;
+      }
+
+      :host([right-aligned]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"][right-aligned]) {
+        align-items: flex-start;
+      }
     </style>
   </template>
 </dom-module>`;

package/src/vaadin-select.js

@@ -178,7 +178,7 @@ class SelectElement extends
   }
 
   static get version() {
-    return '2.4.3';
+    return '2.4.4';
   }
 
   static get properties() {
@@ -680,17 +680,22 @@ class SelectElement extends
   /** @private */
   _setPosition() {
     const inputRect = this._inputElement.shadowRoot.querySelector('[part~="input-field"]').getBoundingClientRect();
+    const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
     const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-    const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;
+    const shouldAlignRight = this.__shouldAlignRight(inputRect, viewportWidth);
+    const shouldAlignBottom = this.__shouldAlignBottom(inputRect, viewportHeight);
 
-    const isRtl = this.getAttribute('dir') === 'rtl';
-    if (isRtl) {
-      this._overlayElement.style.right = document.documentElement.clientWidth - inputRect.right + 'px';
+    if (shouldAlignRight) {
+      this._overlayElement.setAttribute('right-aligned', '');
+      this._overlayElement.style.right = (viewportWidth - inputRect.right) + 'px';
+      this._overlayElement.style.removeProperty('left');
     } else {
+      this._overlayElement.removeAttribute('right-aligned');
       this._overlayElement.style.left = inputRect.left + 'px';
+      this._overlayElement.style.removeProperty('right');
     }
 
-    if (bottomAlign) {
+    if (shouldAlignBottom) {
       this._overlayElement.setAttribute('bottom-aligned', '');
       this._overlayElement.style.removeProperty('top');
       this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';
@@ -703,6 +708,42 @@ class SelectElement extends
     this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});
   }
 
+  /** @private */
+  __shouldAlignRight(targetRect, viewportWidth) {
+    const isRTL = this.getAttribute('dir') === 'rtl';
+    const spaceLeft = targetRect.left / viewportWidth;
+    const spaceRight = (viewportWidth - targetRect.right) / viewportWidth;
+
+    if (isRTL) {
+      // When RTL mode, should align the dropdown right
+      // as long as there is enough space on the left side.
+      //
+      // Default alignment for RTL:
+      //
+      //           _____Select_____
+      // ––––––––––––––––––––––––––
+      // | Dropdown               |
+      // ––––––––––––––––––––––––––
+      return spaceLeft > 0.3;
+    }
+
+    // When LTL mode, should align the dropdown right
+    // only when there is not enough space on the right side.
+    //
+    // Default alignment for LTL:
+    //
+    // _____Select_____
+    // ––––––––––––––––––––––––––
+    // | Dropdown               |
+    // ––––––––––––––––––––––––––
+    return spaceRight < 0.3;
+  }
+
+  /** @private */
+  __shouldAlignBottom(targetRect, viewportHeight) {
+    return targetRect.top > (viewportHeight - targetRect.height) / 2;
+  }
+
   /**
    * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
    *

package/theme/lumo/vaadin-select-styles.js

@@ -105,10 +105,6 @@ const $_documentContainer = html`<dom-module id="lumo-select" theme-for="vaadin-
         --_lumo-item-selected-icon-display: block;
       }
 
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part~="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }

package/theme/material/vaadin-select-styles.js

@@ -55,10 +55,6 @@ const $_documentContainer = html`<dom-module id="material-select" theme-for="vaa
 </dom-module><dom-module id="material-select-overlay" theme-for="vaadin-select-overlay">
   <template>
     <style include="material-menu-overlay">
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }