fix: properly adjust drop position only after rendering (#408)

Author: ghiscoding

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -1311,18 +1311,18 @@ export class MultipleSelectInstance {
   protected adjustDropSizeAndPosition() {
     if (this.dropElm) {
       if (this.options.container) {
-        const offset = getOffset(this.dropElm);
         let container: HTMLElement;
         if (this.options.container instanceof Node) {
           container = this.options.container as HTMLElement;
         } else if (typeof this.options.container === 'string') {
           container = this.options.container === 'body' ? document.body : (document.querySelector(this.options.container) as HTMLElement);
         }
         container!.appendChild(this.dropElm);
-        this.dropElm.style.top = `${offset?.top ?? 0}px`;
-        this.dropElm.style.left = `${offset?.left ?? 0}px`;
+        const { top: offsetTop = 0, left: offsetLeft = 0 } = getOffset(this.parentElm) || {};
+        this.dropElm.style.top = `${offsetTop + this.parentElm.offsetHeight}px`;
+        this.dropElm.style.left = `${offsetLeft}px`;
+        this.dropElm.style.width = `${this.parentElm.offsetWidth}px`;
         this.dropElm.style.minWidth = 'auto';
-        this.dropElm.style.width = `${getSize(this.parentElm, 'outer', 'width')}px`;
       }
 
       const minHeight = this.options.minHeight;

packages/multiple-select-vanilla/src/styles/_variables.scss

@@ -23,6 +23,7 @@ $ms-choice-bgcolor: #fff !default;
 $ms-choice-color: #444 !default;
 $ms-choice-disabled-bgcolor: #f4f4f4 !default;
 $ms-choice-disabled-border: 1px solid #ddd !default;
+$ms-choice-height: 26px !default;
 $ms-choice-padding: 0 6px 0 8px !default;
 $ms-icon-caret-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" !default;
 $ms-icon-close-svg-path: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" !default;

packages/multiple-select-vanilla/src/styles/multiple-select.scss

@@ -107,8 +107,8 @@
   align-items: center;
   cursor: pointer;
   width: 100%;
-  height: 26px;
   overflow: hidden;
+  height: var(--ms-choice-height, v.$ms-choice-height);
   padding: var(--ms-choice-padding, v.$ms-choice-padding);
   background-color: var(--ms-choice-bgcolor, v.$ms-choice-bgcolor);
   border: var(--ms-choice-border, v.$ms-choice-border);