@etsoo/materialui 1.0.6 → 1.0.9

package/__tests__/SelectEx.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { SelectEx } from '../src';
 import { findByText, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { Utils } from '@etsoo/shared';
+import { act } from 'react-dom/test-utils';
 
 it('Render SelectEx', async () => {
     // Arrange
@@ -11,16 +13,41 @@ it('Render SelectEx', async () => {
         { id: 2, name: 'Name 2' }
     ];
 
+    Utils.addBlankItem(options, 'id', 'name');
+
+    const itemChangeCallback = jest.fn((option, userAction) => {
+        if (userAction) expect(option).toBeUndefined();
+        else expect(option.id).toBe(1);
+    });
+
     // Render component
     const { baseElement } = render(
-        <SelectEx<T> options={options} name="test" search labelField="name" />
+        <SelectEx<T>
+            options={options}
+            name="test"
+            onItemChange={itemChangeCallback}
+            value={1}
+            search
+            labelField="name"
+        />
     );
 
+    expect(itemChangeCallback).toBeCalled();
+
     // Act, click to show the list
     const button = screen.getByRole('button');
     fireEvent.mouseDown(button); // Not click
 
     // Get list item
-    const item = await findByText(baseElement, 'Name 2');
-    expect(item.nodeName).toBe('SPAN');
+    const itemName2 = await findByText(baseElement, 'Name 2');
+    expect(itemName2.nodeName).toBe('SPAN');
+
+    const itemBlank = await findByText(baseElement, '---');
+    expect(itemBlank.nodeName).toBe('SPAN');
+
+    act(() => {
+        itemBlank.click();
+    });
+
+    expect(itemChangeCallback).toBeCalledTimes(2);
 });

package/lib/HiSelector.d.ts

@@ -38,9 +38,13 @@ export declare type HiSelectorProps<T extends object, D extends DataTypes.Keys<T
      */
     onChange?: (value: unknown) => void;
     /**
-     * On item change event
+     * On select change event
      */
-    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+    onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
     /**
      * Required
      */

package/lib/HiSelector.js

@@ -8,7 +8,7 @@ import { SelectEx } from './SelectEx';
  */
 export function HiSelector(props) {
     // Destruct
-    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onItemChange, required, values = [] } = props;
+    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onSelectChange, onItemChange, required, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -22,8 +22,16 @@ export function HiSelector(props) {
         if (itemValue != null)
             newValues.push(itemValue);
         setValues(newValues);
-        if (onItemChange)
-            onItemChange(event);
+        if (onSelectChange)
+            onSelectChange(event);
+    };
+    const doItemChange = (option, userAction) => {
+        if (onItemChange == null)
+            return;
+        if (!userAction &&
+            (option == null || option[idField] !== values.at(-1)))
+            return;
+        onItemChange(option, userAction);
     };
     React.useEffect(() => {
         if (values.length > 0) {
@@ -37,11 +45,11 @@ export function HiSelector(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label),
             React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ''}` })),
         React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), inputRequired: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1) }))),
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2) }))),
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3) })))));
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
 }

package/lib/ListMoreDisplay.js

@@ -22,7 +22,8 @@ export function ListMoreDisplay(props) {
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
     // States
@@ -59,13 +60,15 @@ export function ListMoreDisplay(props) {
         // Next page
         ref.currentPage = currentPage + 1;
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        }
+        else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
     const reset = (data) => {
         // Update the form data

package/lib/ScrollerListEx.d.ts

@@ -34,7 +34,7 @@ export declare type ScrollerListExItemSize = ((index: number) => [number, number
 /**
  * Extended ScrollerList Props
  */
-export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -47,11 +47,6 @@ export declare type ScrollerListExProps<T extends object, D extends DataTypes.Ke
      * Item renderer
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
     /**
      * Item size, a function indicates its a variable size list
      */

package/lib/ScrollerListEx.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { ScrollerList } from '@etsoo/react';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { Utils } from '@etsoo/shared';
 import { useTheme } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
@@ -112,7 +112,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemRenderer = (itemProps) => {
         const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,
@@ -163,5 +163,5 @@ export function ScrollerListEx(props) {
         return size + space;
     };
     // Layout
-    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

package/lib/SelectEx.d.ts

@@ -37,6 +37,10 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
     /**
      * Item click handler
      */

package/lib/SelectEx.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 /**
  * Extended select component
  * @param props Props
@@ -12,17 +11,33 @@ import { ReactUtils } from '@etsoo/react';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(true);
+    const doItemChange = (options, value, userAction) => {
+        if (onItemChange == null)
+            return;
+        if (value == null || value === '') {
+            onItemChange(undefined, userAction);
+            return;
+        }
+        const option = options.find((option) => option[idField] === value);
+        onItemChange(option, userAction);
+    };
+    const setOptionsAdd = (options) => {
+        setOptions(options);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
+    };
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
-            setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay)
+            return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;
@@ -59,14 +74,15 @@ export function SelectEx(props) {
     };
     // Set item
     const setItemValue = (id) => {
-        var _a;
         if (id != valueState) {
             setValueState(id);
-            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            /*
+            const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                ReactUtils.triggerChange(input, id, false);
+                ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
     // Get option id
@@ -92,7 +108,7 @@ export function SelectEx(props) {
                 if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
-                setOptions(result);
+                setOptionsAdd(result);
             });
         }
     }, [localValue]);
@@ -121,8 +137,8 @@ export function SelectEx(props) {
                 : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
-                if (multiple)
-                    handleChange(event);
+                doItemChange(localOptions, event.target.value, true);
+                handleChange(event);
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
@@ -146,8 +162,6 @@ export function SelectEx(props) {
                         if (event.defaultPrevented)
                             return;
                     }
-                    if (!multiple)
-                        setItemValue(id);
                 }, style: itemStyle == null
                     ? undefined
                     : itemStyle(option) },

package/lib/TableEx.js

@@ -51,7 +51,8 @@ export function TableEx(props) {
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;
     // Reset the state and load again

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.6",
+    "version": "1.0.9",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,12 +51,12 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.2.88",
+        "@etsoo/appscript": "^1.2.89",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/react": "^1.5.86",
-        "@etsoo/shared": "^1.1.51",
+        "@etsoo/react": "^1.5.87",
+        "@etsoo/shared": "^1.1.52",
         "@mui/icons-material": "^5.10.3",
-        "@mui/material": "^5.10.3",
+        "@mui/material": "^5.10.4",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.18",
@@ -76,19 +76,19 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.13",
+        "@babel/core": "^7.19.0",
         "@babel/plugin-transform-runtime": "^7.18.10",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/runtime-corejs3": "^7.18.9",
+        "@babel/preset-env": "^7.19.0",
+        "@babel/runtime-corejs3": "^7.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.3.0",
+        "@testing-library/react": "^13.4.0",
         "@types/jest": "^29.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.36.1",
-        "@typescript-eslint/parser": "^5.36.1",
+        "@typescript-eslint/eslint-plugin": "^5.36.2",
+        "@typescript-eslint/parser": "^5.36.2",
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.1",
+        "eslint-plugin-react": "^7.31.7",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "ts-jest": "^28.0.8",

package/src/HiSelector.tsx

@@ -52,9 +52,14 @@ export type HiSelectorProps<
     onChange?: (value: unknown) => void;
 
     /**
-     * On item change event
+     * On select change event
      */
-    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+    onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
+
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
 
     /**
      * Required
@@ -87,6 +92,7 @@ export function HiSelector<
         labelField = 'name' as L,
         loadData,
         onChange,
+        onSelectChange,
         onItemChange,
         required,
         values = []
@@ -109,7 +115,17 @@ export function HiSelector<
         if (itemValue != null) newValues.push(itemValue);
         setValues(newValues);
 
-        if (onItemChange) onItemChange(event);
+        if (onSelectChange) onSelectChange(event);
+    };
+
+    const doItemChange = (option: T | undefined, userAction: boolean) => {
+        if (onItemChange == null) return;
+        if (
+            !userAction &&
+            (option == null || option[idField] !== values.at(-1))
+        )
+            return;
+        onItemChange(option, userAction);
     };
 
     React.useEffect(() => {
@@ -146,6 +162,7 @@ export function HiSelector<
                     loadData={() => loadData()}
                     value={values[0]}
                     onChange={(event) => doChange(event, 0)}
+                    onItemChange={doItemChange}
                     inputRequired={required}
                     error={error}
                     helperText={helperText}
@@ -163,6 +180,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[0])}
                         value={values[1]}
                         onChange={(event) => doChange(event, 1)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}
@@ -178,6 +196,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[1])}
                         value={values[2]}
                         onChange={(event) => doChange(event, 2)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}
@@ -193,6 +212,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[2])}
                         value={values[3]}
                         onChange={(event) => doChange(event, 3)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}

package/src/ListMoreDisplay.tsx

@@ -92,7 +92,8 @@ export function ListMoreDisplay<
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
 
@@ -141,13 +142,14 @@ export function ListMoreDisplay<
         ref.currentPage = currentPage + 1;
 
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        } else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
 
     const reset = (data?: GridData) => {

package/src/ScrollerListEx.tsx

@@ -120,7 +120,7 @@ export type ScrollerListExItemSize =
 export type ScrollerListExProps<
     T extends object,
     D extends DataTypes.Keys<T>
-> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -138,12 +138,6 @@ export type ScrollerListExProps<
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
-
     /**
      * Item size, a function indicates its a variable size list
      */
@@ -302,8 +296,6 @@ export function ScrollerListEx<
         idField = 'id' as D,
         innerItemRenderer,
         itemSize,
-        itemKey = (index: number, data: T) =>
-            DataTypes.getIdValue1(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const [itemHeight, space, margins] = calculateItemSize(
                 itemProps.index
@@ -372,13 +364,13 @@ export function ScrollerListEx<
 
     // Layout
     return (
-        <ScrollerList<T>
+        <ScrollerList<T, D>
             className={Utils.mergeClasses(
                 'ScrollerListEx-Body',
                 className,
                 createGridStyle(alternatingColors, selectedColor)
             )}
-            itemKey={itemKey}
+            idField={idField}
             itemRenderer={itemRenderer}
             itemSize={itemSizeLocal}
             {...rest}

package/src/SelectEx.tsx

@@ -20,7 +20,6 @@ import {
     ListType,
     Utils
 } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 
 /**
  * Extended select component props
@@ -70,6 +69,11 @@ export type SelectExProps<
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
 
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
+
     /**
      * Item click handler
      */
@@ -113,11 +117,12 @@ export function SelectEx<
         label,
         labelField = 'label' as L,
         loadData,
+        onItemChange,
         onItemClick,
         onLoadData,
         multiple = false,
         name,
-        options = [],
+        options,
         search = false,
         autoAddBlankItem = search,
         value,
@@ -127,15 +132,36 @@ export function SelectEx<
     } = props;
 
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState<readonly T[]>([]);
     const isMounted = React.useRef(true);
 
+    const doItemChange = (
+        options: readonly T[],
+        value: unknown,
+        userAction: boolean
+    ) => {
+        if (onItemChange == null) return;
+        if (value == null || value === '') {
+            onItemChange(undefined, userAction);
+            return;
+        }
+        const option = options.find((option) => option[idField] === value);
+        onItemChange(option, userAction);
+    };
+
+    const setOptionsAdd = (options: readonly T[]) => {
+        setOptions(options);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
+    };
+
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null) setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay) return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
 
     // Local value
     const valueSource = defaultValue ?? value ?? '';
@@ -175,11 +201,13 @@ export function SelectEx<
         if (id != valueState) {
             setValueState(id);
 
+            /*
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
 
@@ -207,7 +235,7 @@ export function SelectEx<
                 if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
-                setOptions(result);
+                setOptionsAdd(result);
             });
         }
     }, [localValue]);
@@ -263,7 +291,8 @@ export function SelectEx<
                 multiple={multiple}
                 onChange={(event, child) => {
                     if (onChange) onChange(event, child);
-                    if (multiple) handleChange(event);
+                    doItemChange(localOptions, event.target.value, true);
+                    handleChange(event);
                 }}
                 renderValue={(selected) => {
                     // The text shows up
@@ -298,7 +327,6 @@ export function SelectEx<
                                     onItemClick(event, option);
                                     if (event.defaultPrevented) return;
                                 }
-                                if (!multiple) setItemValue(id);
                             }}
                             style={
                                 itemStyle == null

package/src/TableEx.tsx

@@ -163,7 +163,8 @@ export function TableEx<
             ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;