@etsoo/materialui 1.0.41 → 1.0.43

package/lib/ComboBox.js

@@ -24,7 +24,7 @@ export function ComboBox(props) {
     React.useEffect(() => {
         if (propertyWay && options != null)
             setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
+    }, [options, propertyWay]);
     // Local default value
     let localValue = idValue != null
         ? localOptions.find((o) => o[idField] === idValue)
@@ -75,21 +75,20 @@ export function ComboBox(props) {
             }
         }
     };
-    // When value change
     React.useEffect(() => {
-        if (loadData) {
-            loadData().then((result) => {
-                if (result == null || !isMounted.current)
-                    return;
-                if (onLoadData)
-                    onLoadData(result);
-                if (autoAddBlankItem) {
-                    SharedUtils.addBlankItem(result, idField, labelField);
-                }
-                setOptions(result);
-            });
-        }
-    }, [localValue]);
+        if (propertyWay || loadData == null)
+            return;
+        loadData().then((result) => {
+            if (result == null || !isMounted.current)
+                return;
+            if (onLoadData)
+                onLoadData(result);
+            if (autoAddBlankItem) {
+                SharedUtils.addBlankItem(result, idField, labelField);
+            }
+            setOptions(result);
+        });
+    }, [propertyWay]);
     React.useEffect(() => {
         return () => {
             isMounted.current = false;

package/lib/DataSteps.js

@@ -74,10 +74,13 @@ export function DataSteps(props) {
             setLocalValue(valueFormatter(dataRef.current));
         }
     }, [jsonValue]);
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: {
-            onKeyDown: cancelInput,
+    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, inputProps: { style: { cursor: 'pointer' } }, InputProps: {
+            onKeyDown: (event) => {
+                if (event.key === 'Tab')
+                    return;
+                cancelInput(event);
+            },
             onPaste: cancelInput,
-            sx: { cursor: 'pointer' },
             endAdornment: (React.createElement(InputAdornment, { position: "end" },
                 React.createElement(IconButton, { edge: "end", size: "small" },
                     React.createElement(StartIcon, null))))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.41",
+    "version": "1.0.43",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -56,7 +56,7 @@
         "@etsoo/react": "^1.6.12",
         "@etsoo/shared": "^1.1.59",
         "@mui/icons-material": "^5.10.6",
-        "@mui/material": "^5.10.7",
+        "@mui/material": "^5.10.8",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.21",
@@ -83,8 +83,8 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@types/jest": "^29.1.1",
-        "@typescript-eslint/eslint-plugin": "^5.38.1",
-        "@typescript-eslint/parser": "^5.38.1",
+        "@typescript-eslint/eslint-plugin": "^5.39.0",
+        "@typescript-eslint/parser": "^5.39.0",
         "eslint": "^8.24.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/ComboBox.tsx

@@ -104,7 +104,7 @@ export function ComboBox<
     const propertyWay = loadData == null;
     React.useEffect(() => {
         if (propertyWay && options != null) setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
+    }, [options, propertyWay]);
 
     // Local default value
     let localValue =
@@ -168,19 +168,17 @@ export function ComboBox<
         }
     };
 
-    // When value change
     React.useEffect(() => {
-        if (loadData) {
-            loadData().then((result) => {
-                if (result == null || !isMounted.current) return;
-                if (onLoadData) onLoadData(result);
-                if (autoAddBlankItem) {
-                    SharedUtils.addBlankItem(result, idField, labelField);
-                }
-                setOptions(result);
-            });
-        }
-    }, [localValue]);
+        if (propertyWay || loadData == null) return;
+        loadData().then((result) => {
+            if (result == null || !isMounted.current) return;
+            if (onLoadData) onLoadData(result);
+            if (autoAddBlankItem) {
+                SharedUtils.addBlankItem(result, idField, labelField);
+            }
+            setOptions(result);
+        });
+    }, [propertyWay]);
 
     React.useEffect(() => {
         return () => {

package/src/DataSteps.tsx

@@ -181,10 +181,13 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
     return (
         <TextField
             InputLabelProps={InputLabelProps}
+            inputProps={{ style: { cursor: 'pointer' } }}
             InputProps={{
-                onKeyDown: cancelInput,
+                onKeyDown: (event) => {
+                    if (event.key === 'Tab') return;
+                    cancelInput(event);
+                },
                 onPaste: cancelInput,
-                sx: { cursor: 'pointer' },
                 endAdornment: (
                     <InputAdornment position="end">
                         <IconButton edge="end" size="small">