Skip to content
This repository has been archived by the owner on Sep 30, 2024. It is now read-only.

Commit

Permalink
fix(AutoComplete): give min height for menu to prevent items clipped
Browse files Browse the repository at this point in the history
  • Loading branch information
lukicenturi committed Jul 12, 2024
1 parent 97973fe commit 67ad798
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions src/components/forms/auto-complete/RuiAutoComplete.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import RuiIcon from '@/components/icons/Icon.vue';
import RuiChip from '@/components/chips/Chip.vue';
import RuiMenu, { type MenuProps } from '@/components/overlays/menu/Menu.vue';
import RuiProgress from '@/components/progress/Progress.vue';
import type { Ref } from 'vue';
export type T = any;
Expand Down Expand Up @@ -521,6 +520,13 @@ function arrowClicked(event: any) {
}
}
const renderedOptions = ref([]);
const menuMinHeight: ComputedRef<number> = computed(() => {
const renderedOptionsData = get(renderedOptions).slice(0, 5);
return renderedOptionsData.reduce((currentValue, item: typeof RuiButton) => currentValue + item.$el.offsetHeight, 0);
});
defineExpose({
focus: setInputFocus,
setSelectionRange,
Expand Down Expand Up @@ -711,7 +717,7 @@ defineExpose({
<div
v-if="optionsWithSelectedHidden.length > 0"
:class="[css.menu, menuClass]"
:style="{ width: `${width}px`, minWidth: menuWidth }"
:style="{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }"
v-bind="virtualContainerProps"
@scroll="containerProps.onScroll"
@keydown.up.prevent="moveHighlight(true)"
Expand All @@ -723,7 +729,8 @@ defineExpose({
>
<RuiButton
v-for="({ item, index }) in renderedData"
:key="index"
ref="renderedOptions"
:key="getIdentifier(item)"
:active="isActiveItem(item)"
:size="dense ? 'sm' : undefined"
:value="getIdentifier(item)"
Expand Down

0 comments on commit 67ad798

Please sign in to comment.