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

Commit

Permalink
fix(AutoComplete): some issues
Browse files Browse the repository at this point in the history
  • Loading branch information
lukicenturi committed Jun 5, 2024
1 parent 76241a5 commit df6f0fa
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 20 deletions.
14 changes: 14 additions & 0 deletions src/components/forms/auto-complete/RuiAutoComplete.vue
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,16 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
...listenersFiltered,
};
}
function setInputSelectionRange(start: number, end: number) {
set(searchInputFocused, true);
get(textInput)?.setSelectionRange?.(start, end);
}
defineExpose({
setInputFocus,
setInputSelectionRange,
});
</script>

<template>
Expand All @@ -459,6 +469,10 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
fullWidth: true,
persistOnActivatorClick: true,
...menuOptions,
menuClass: [
{ hidden: (optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data']) },
menuOptions?.menuClass,
],
errorMessages,
successMessages,
hint,
Expand Down
4 changes: 2 additions & 2 deletions src/components/overlays/menu/Menu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export interface MenuProps {
openDelay?: number;
closeDelay?: number;
popper?: PopperOptions;
wrapperClass?: string;
menuClass?: string;
wrapperClass?: any;
menuClass?: any;
closeOnContentClick?: boolean;
persistOnActivatorClick?: boolean;
hint?: string;
Expand Down
42 changes: 24 additions & 18 deletions src/composables/dropdown-menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,26 +138,28 @@ export function useDropdownMenu<T, K extends keyof T>({

function adjustScrollByHighlightedIndex(smooth: boolean = false) {
const index = get(highlightedIndex);
nextTick(() => {
const container = get(menuRef)?.parentElement;
if (container && index > -1) {
const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];

if (highlightedElem) {
highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')
highlightedElem?.focus();
}
else {
scrollTo(index);
if (get(autoFocus)) {
const elem = get(menuRef).getElementsByClassName('highlighted')[0];
if (elem && 'focus' in elem && typeof elem.focus === 'function')
elem.focus();
if (index > -1) {
nextTick(() => {
const container = get(menuRef)?.parentElement;
if (container) {
const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];

if (highlightedElem) {
highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')
highlightedElem?.focus();
}
else {
scrollTo(index);
if (get(autoFocus)) {
const elem = get(menuRef).getElementsByClassName('highlighted')[0];
if (elem && 'focus' in elem && typeof elem.focus === 'function')
elem.focus();
}
}
}
}
});
});
}
}

function updateOpen(open: boolean) {
Expand Down Expand Up @@ -193,12 +195,16 @@ export function useDropdownMenu<T, K extends keyof T>({
if (get(highlightedIndex) !== -1) {
if (get(autoSelectFirst)) {
set(highlightedIndex, 0);
adjustScrollByHighlightedIndex();
}
else {
set(highlightedIndex, -1);
scrollTo(0);
}
}
else {
scrollTo(0);
}
});

const moveHighlight = (up: boolean) => {
Expand Down

0 comments on commit df6f0fa

Please sign in to comment.