fix(select): fix keyboard up down behaviour when using group config(#…

…3278)

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

* fix(select): 修复新增的setHoverIntoView方法下常量没给定类型导致lint校验失败

src/select/select.tsx

@@ -415,6 +415,7 @@ export default defineComponent({
           count += 1;
           if (count >= displayOptionsLength) break;
         }
+        setHoverIntoView();
       };
       const arrowUpOption = () => {
         let count = 0;
@@ -430,6 +431,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'];

src/select/util.ts

@@ -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[],
+);