feat: expose maxHeight prop

soc221b · Jun 5, 2021 · 5e9bf83 · 5e9bf83
1 parent 1b4de97
commit 5e9bf83
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/docs/api-reference.md b/docs/api-reference.md
@@ -218,6 +218,18 @@
 
   Whether to collapse dropdown after selected/removed.
 
+### maxHeight
+
+New in `v2.5.0+`
+
+- **Type**: `number`
+
+- **Default**: `300`
+
+- **Details**:
+
+  Max height of dropdown.
+
 ## Events
 
 ### update:modelValue

diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
@@ -1,6 +1,7 @@
 <template>
   <ul
     class="vue-dropdown"
+    :style="{ maxHeight: maxHeight + 'px' }"
     @mousedown.prevent
     v-bind="dataAttrs"
     role="listbox"
@@ -53,6 +54,9 @@ export default {
       required: true,
       type: Number,
     },
+    maxHeight: {
+      required: true,
+    },
   },
   emits: ['click-item', 'mousemove'],
   setup(props, context) {

diff --git a/src/index.css b/src/index.css
@@ -166,7 +166,6 @@ input[readonly] {
   position: relative;
   background-color: white;
   z-index: 1;
-  max-height: 300px;
   overflow-y: auto;
   width: 100%;
   min-width: 0;

diff --git a/src/index.vue b/src/index.vue
@@ -116,6 +116,7 @@
       @click-item="addOrRemoveOption"
       @mousemove="(ev, option) => pointerSet(option.originalIndex)"
       :comboboxUid="instance.uid"
+      :maxHeight="maxHeight"
     >
       <template #default="{ option }">
         <slot name="dropdown-item" :option="option.originalOption">
@@ -253,6 +254,10 @@ const VueSelect = {
       default: false,
       type: Boolean,
     },
+    maxHeight: {
+      default: 300,
+      type: Number,
+    },
   },
   emits: [
     'selected',