Skip to content

Commit

Permalink
fix(select): fix keyboard up down behaviour when using group config(#…
Browse files Browse the repository at this point in the history
…3278)

* fix(select): 修复 flattenOptions 方法分组扁平化问题及上下键切换功能
>>
>> - 修复了 flattenOptions 函数未正确扁平化分组的问题,导致在分组间切换时上下键无法正确切换。
>> - 修复了上下键切换时,激活项未能滚动到下拉面板视口内的问题。

* fix(select): 修复新增的setHoverIntoView方法下常量没给定类型导致lint校验失败
  • Loading branch information
dhwebs authored Aug 21, 2024
1 parent 608af38 commit 959742c
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 4 deletions.
20 changes: 20 additions & 0 deletions src/select/select.tsx
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
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[],
);

0 comments on commit 959742c

Please sign in to comment.