v0.5.1

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Patch notes
 
-Current vue-extended-multiselect version: **0.5.0**
+Current vue-extended-multiselect version: **0.5.1**
 
 ***
 
@@ -103,4 +103,8 @@ Current vue-extended-multiselect version: **0.5.0**
 ### 0.5.0 (2024-04-04)
 
 * Changing behaviour of "select" event: it no longer fires after setting preselected options.
-* Fixing bug with incorrect modelValue type in preselected options setter method.
+* Fixing bug with incorrect modelValue type in preselected options setter method.
+
+### 0.5.1 (2024-04-04)
+
+* Fixing bug with incorrect options list placement.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-extended-multiselect",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Extended multiselect component for applications based on Vue 2 framework",
   "keywords": [
     "multiselect",

src/components/ExtendedMultiselectMultiple.vue

@@ -24,13 +24,15 @@
           >
             <div :class="classes">
               <span>{{ optionCreateLabel(option) }}</span>
-              <div :class="deselectClasses">
+              <div 
+                :class="deselectClasses"
+                @click.stop="deselectBlock(index)"
+              >
                 <img
                   alt=""
                   class="extended__multiselect_deselect-block-icon"
                   v-if="!showLoaderIcon"
                   :src="require('../assets/cancel.svg')"
-                  @click.stop="deselectBlock(index)"
                 />
                 <extended-multiselect-loader
                   v-else

src/components/VueExtendedMultiselect.vue

@@ -147,6 +147,7 @@
       type="transition"
     >
       <extended-multiselect-options
+        ref="extendedMultiselectOptions"
         v-if="dropdownActive"
         :auto-select-created-option="autoSelectCreatedOption"
         :clear-by-select-when-multiple="clearBySelectWhenMultiple"
@@ -285,7 +286,7 @@ import store from "../vuex/store";
  * @mixes ToggleMixin
  * @mixes CancelMixin
  * @mixes PreselectedOptionsMixin
- * @version 0.5.0
+ * @version 0.5.1
  */
 export default Vue.extend({
   name: "VueExtendedMultiselect",

src/mixins/methods.js

@@ -306,13 +306,15 @@ export default {
      * @returns {string} position
      */
     toggleAppearanceRestrictor() {
-      if (!window) return "under";
+      if (!window || !this.$refs.extendedMultiselectOptions) return "under";
 
       const innerHeight = window.innerHeight;
+      const offsetHeight = this.$refs.extendedMultiselectOptions.offsetHeight
+       + this.$refs.extendedMultiselect.offsetHeight;
       const offsetTop = this.$refs.extendedMultiselect.getBoundingClientRect().y;
       const difference = innerHeight - offsetTop;
 
-      if (difference > this.toggleMaxHeight) {
+      if (difference > offsetHeight) {
         return "under";
       } else {
         return "atop";
@@ -324,7 +326,7 @@ export default {
      * @method
      */
     toggleAppearanceRestrictorActivate() {
-      if (!this.dropdownActive) {
+      if (this.dropdownActive) {
         this.chosenToggleAppearanceSide = this.toggleAppearanceSide !== "auto"
          ? this.toggleAppearanceSide
          : this.toggleAppearanceRestrictor();
@@ -444,15 +446,17 @@ export default {
     toggleOptions() {
       if (this.internalLoading || this.disabled || this.dropdownDisabled) return;
 
-      this.toggleAppearanceRestrictorActivate();
+      this.dropdownActive = !this.dropdownActive;
+
+      this.$nextTick(() => {
+        this.toggleAppearanceRestrictorActivate();
+      });
 
       if (!this.dropdownActive) {
         this.activeEmitter();
       } else {
         this.closeEmitter();
       }
-
-      this.dropdownActive = !this.dropdownActive;
     },
 
     /**
@@ -577,10 +581,12 @@ export default {
     this.emitter.$on("extended:expand-options", () => {
       if (this.dropdownActive || this.dropdownDisabled) return;
 
-      this.toggleAppearanceRestrictorActivate();
-      this.activeEmitter();
-
       this.dropdownActive = true;
+
+      this.$nextTick(() => {
+        this.toggleAppearanceRestrictorActivate();
+      });
+      this.activeEmitter();
     });
 
     this.emitter.$on("extended:rollup-options", () => {
@@ -760,6 +766,10 @@ export default {
        && typeof this.options !== "function"
     ) {
       this.dropdownActive = true;
+
+      this.$nextTick(() => {
+        this.toggleAppearanceRestrictorActivate();
+      });
     }
 
     this.emitter.$on("extended:loader-pattern-changed", (pattern) => {