Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(select): 修复 flattenOptions 方法分组扁平化问题及上下键切换功能 #3278

Merged
merged 2 commits into from
Aug 21, 2024
Merged

fix(select): 修复 flattenOptions 方法分组扁平化问题及上下键切换功能 #3278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48484fb
fix(select): 修复 flattenOptions 方法分组扁平化问题及上下键切换功能
dhwebs Aug 21, 2024
15f7f78
fix(select): 修复新增的setHoverIntoView方法下常量没给定类型导致lint校验失败
dhwebs Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions src/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,6 +428,7 @@ export default defineComponent({
count += 1;
if (count >= displayOptionsLength) break;
}
setHoverIntoView();
};
const arrowUpOption = () => {
let count = 0;
Expand All @@ -443,6 +444,25 @@ export default defineComponent({
count += 1;
if (count >= displayOptionsLength) break;
}
setHoverIntoView();
};
/** 让hover元素滚动到下拉面板视口 */
const setHoverIntoView = () => {
nextTick(() => {
const hoverDom = selectPanelRef.value?.$el.querySelector(
`li.${classPrefix.value}-select-option.${classPrefix.value}-select-option__hover`,
) as HTMLElement | null;
if (hoverDom) {
const container = selectPanelRef.value.$el.parentNode as HTMLElement;
const containerRect = container.getBoundingClientRect();
const hoverDomRect = hoverDom.getBoundingClientRect();
const offsetTop = hoverDomRect.top - containerRect.top + container.scrollTop;
container.scrollTo({
top: offsetTop - (container.offsetHeight - hoverDom.offsetHeight * 2),
behavior: 'smooth',
});
}
});
};
if (displayOptionsLength === 0) return;
const preventKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'];
Expand Down
10 changes: 6 additions & 4 deletions src/select/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ export const getNewMultipleValue = (innerValue: SelectValue[], optionValue: Sele
export const getAllSelectableOption = (options: TdOptionProps[]) => options.filter((option) => !option.disabled && !option.checkAll);

/** 将 options 扁平化，拍扁所有 group */
export const flattenOptions = (options: (TdOptionProps & { isCreated?: boolean })[]): SelectOption[] => options.reduce((acc, current) => {
acc.push((current as SelectOptionGroup).group ? flattenOptions((current as SelectOptionGroup).children) : current);
return acc;
}, [] as SelectOption[]);
export const flattenOptions = (options: (TdOptionProps & { isCreated?: boolean })[]): SelectOption[] => options.reduce(
(acc, current) => acc.concat(
(current as SelectOptionGroup).group ? flattenOptions((current as SelectOptionGroup).children) : [current],
),
[] as SelectOption[],
);
Loading