fix(ui): disable event when loading

Author: xiejay97

packages/ui/src/components/auto-complete/AutoComplete.tsx

@@ -448,6 +448,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
                         ref={vsScrollRef}
                         id={listId}
                         className={`${dPrefix}auto-complete__list`}
+                        style={{ pointerEvents: dLoading ? 'none' : undefined }}
                         tabIndex={-1}
                         role="listbox"
                         aria-activedescendant={isUndefined(focusItem) ? undefined : getItemId(focusItem.value)}

packages/ui/src/components/cascader/Cascader.tsx

@@ -411,6 +411,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
               {hasSearch ? (
                 <DTreeSearchPanel
                   id={listId}
+                  style={{ pointerEvents: dLoading ? 'none' : undefined }}
                   dGetItemId={getItemId}
                   dList={searchList}
                   dFocusItem={searchFocusItem}
@@ -442,7 +443,8 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
                 ></DTreeSearchPanel>
               ) : (
                 <DList
-                  dListId={listId}
+                  id={listId}
+                  style={{ pointerEvents: dLoading ? 'none' : undefined }}
                   dGetItemId={getItemId}
                   dList={renderNodes}
                   dFocusItem={noSearchFocusItem}

packages/ui/src/components/cascader/List.tsx

@@ -14,8 +14,7 @@ import { getClassName } from '../../utils';
 import { DCheckbox } from '../checkbox';
 import { DVirtualScroll } from '../virtual-scroll';
 
-export interface DListProps<V extends DId, T extends DCascaderItem<V>> {
-  dListId?: string;
+export interface DListProps<V extends DId, T extends DCascaderItem<V>> extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   dGetItemId: (value: V) => string;
   dList: AbstractTreeNode<V, T>[];
   dFocusItem: AbstractTreeNode<V, T> | undefined;
@@ -29,8 +28,20 @@ export interface DListProps<V extends DId, T extends DCascaderItem<V>> {
 }
 
 export function DList<V extends DId, T extends DCascaderItem<V>>(props: DListProps<V, T>): JSX.Element | null {
-  const { dListId, dGetItemId, dList, dFocusItem, dCustomItem, dMultiple, dFocusVisible, dRoot, onClickItem, onFocusChange, onKeyDown$ } =
-    props;
+  const {
+    dGetItemId,
+    dList,
+    dFocusItem,
+    dCustomItem,
+    dMultiple,
+    dFocusVisible,
+    dRoot,
+    onClickItem,
+    onFocusChange,
+    onKeyDown$,
+
+    ...restProps
+  } = props;
 
   //#region Context
   const dPrefix = usePrefixConfig();
@@ -187,15 +198,21 @@ export function DList<V extends DId, T extends DCascaderItem<V>>(props: DListPro
         dPadding={4}
       >
         {({ vsScrollRef, vsRender, vsOnScroll }) => (
+          // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex
           <ul
             ref={vsScrollRef}
-            id={dListId}
-            className={`${dPrefix}cascader__list`}
-            tabIndex={-1}
-            role="listbox"
-            aria-multiselectable={dMultiple}
-            aria-activedescendant={dRoot && !isUndefined(dFocusItem) ? dGetItemId(dFocusItem.id) : undefined}
-            onScroll={vsOnScroll}
+            {...restProps}
+            className={getClassName(restProps.className, `${dPrefix}cascader__list`)}
+            tabIndex={restProps.tabIndex ?? -1}
+            role={restProps.role ?? 'listbox'}
+            aria-multiselectable={restProps['aria-multiselectable'] ?? dMultiple}
+            aria-activedescendant={
+              restProps['aria-activedescendant'] ?? (dRoot && !isUndefined(dFocusItem) ? dGetItemId(dFocusItem.id) : undefined)
+            }
+            onScroll={(e) => {
+              restProps.onScroll?.(e);
+              vsOnScroll(e);
+            }}
           >
             {dList.length === 0 ? (
               <li className={`${dPrefix}cascader__empty`}>
@@ -208,7 +225,7 @@ export function DList<V extends DId, T extends DCascaderItem<V>>(props: DListPro
         )}
       </DVirtualScroll>
       {inFocusNode && !inFocusNode.origin.loading && inFocusNode.children && (
-        <DList {...props} dListId={undefined} dList={inFocusNode.children} dRoot={false}></DList>
+        <DList {...props} id={undefined} dList={inFocusNode.children} dRoot={false}></DList>
       )}
     </>
   );

packages/ui/src/components/select/Select.tsx

@@ -565,6 +565,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
                     ref={vsScrollRef}
                     id={listId}
                     className={`${dPrefix}select__list`}
+                    style={{ pointerEvents: dLoading ? 'none' : undefined }}
                     tabIndex={-1}
                     role="listbox"
                     aria-multiselectable={dMultiple}

packages/ui/src/components/table/TableFilter.tsx

@@ -314,6 +314,7 @@ function TableFilter<V extends DId, T extends DTableFilterItem<V>>(
                 ref={vsScrollRef}
                 id={listId}
                 className={`${dPrefix}table__filter-list`}
+                style={{ pointerEvents: dLoading ? 'none' : undefined }}
                 tabIndex={-1}
                 role="listbox"
                 aria-multiselectable={dMultiple}

packages/ui/src/components/transfer/Panel.tsx

@@ -128,7 +128,12 @@ export function DPanel<V extends DId, T extends DTransferItem<V>>(props: DPanelP
           onScrollEnd={onScrollBottom}
         >
           {({ vsScrollRef, vsRender, vsOnScroll }) => (
-            <ul ref={vsScrollRef} className={`${dPrefix}transfer__list`} onScroll={vsOnScroll}>
+            <ul
+              ref={vsScrollRef}
+              className={`${dPrefix}transfer__list`}
+              style={{ pointerEvents: dLoading ? 'none' : undefined }}
+              onScroll={vsOnScroll}
+            >
               {dList.length === 0 ? <DEmpty className={`${dPrefix}transfer__empty`}></DEmpty> : vsRender}
             </ul>
           )}

packages/ui/src/components/tree-select/TreeSelect.tsx

@@ -443,6 +443,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
               {hasSearch ? (
                 <DTreeSearchPanel
                   id={listId}
+                  style={{ pointerEvents: dLoading ? 'none' : undefined }}
                   dGetItemId={getItemId}
                   dList={searchList}
                   dFocusItem={searchFocusItem}
@@ -468,6 +469,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
               ) : (
                 <DTreePanel
                   id={listId}
+                  style={{ pointerEvents: dLoading ? 'none' : undefined }}
                   dGetGroupId={getGroupId}
                   dGetItemId={getItemId}
                   dList={renderNodes}

packages/ui/src/components/tree/SearchPanel.tsx

@@ -166,9 +166,12 @@ export function DSearchPanel<V extends DId, T extends DTreeItem<V>>(props: DSear
           className={getClassName(restProps.className, `${dPrefix}tree__search-list`)}
           tabIndex={restProps.tabIndex ?? -1}
           role={restProps.role ?? 'listbox'}
-          aria-multiselectable={dMultiple}
-          aria-activedescendant={isUndefined(dFocusItem) ? undefined : dGetItemId(dFocusItem.value)}
-          onScroll={vsOnScroll}
+          aria-multiselectable={restProps['aria-multiselectable'] ?? dMultiple}
+          aria-activedescendant={restProps['aria-activedescendant'] ?? (isUndefined(dFocusItem) ? undefined : dGetItemId(dFocusItem.value))}
+          onScroll={(e) => {
+            restProps.onScroll?.(e);
+            vsOnScroll(e);
+          }}
         >
           {dList.length === 0 ? (
             <li className={`${dPrefix}tree__search-empty`}>