@etsoo/materialui 1.0.43 → 1.0.44

package/lib/SelectEx.js

@@ -4,6 +4,7 @@ import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '@etsoo/react';
 /**
  * Extended select component
  * @param props Props
@@ -52,7 +53,12 @@ export function SelectEx(props) {
         localValue = valueSource;
     }
     // Value state
-    const [valueState, setValueState] = React.useState();
+    const [valueState, setValueStateBase] = React.useState();
+    const valueRef = React.useRef();
+    const setValueState = (newValue) => {
+        valueRef.current = newValue;
+        setValueStateBase(newValue);
+    };
     React.useEffect(() => {
         if (localValue != null)
             setValueState(localValue);
@@ -69,22 +75,23 @@ export function SelectEx(props) {
     const handleChange = (event) => {
         const value = event.target.value;
         if (multiple && !Array.isArray(value))
-            setItemValue([value]);
+            return setItemValue([value]);
         else
-            setItemValue(value);
+            return setItemValue(value);
     };
     // Set item
     const setItemValue = (id) => {
-        if (id != valueState) {
+        var _a;
+        if (id != valueRef.current) {
             setValueState(id);
-            /*
-            const input = divRef.current?.querySelector('input');
+            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                ReactUtils.triggerChange(input, id as string, false);
+                ReactUtils.triggerChange(input, id, false);
             }
-            */
+            return true;
         }
+        return false;
     };
     // Get option id
     const getId = (option) => {
@@ -147,8 +154,9 @@ export function SelectEx(props) {
                         if (event.defaultPrevented)
                             return;
                     }
-                    doItemChange(localOptions, event.target.value, true);
-                    handleChange(event);
+                    if (handleChange(event)) {
+                        doItemChange(localOptions, event.target.value, true);
+                    }
                 }, renderValue: (selected) => {
                     // The text shows up
                     return localOptions

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.43",
+    "version": "1.0.44",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/SelectEx.tsx

@@ -23,6 +23,7 @@ import {
     ListType,
     Utils
 } from '@etsoo/shared';
+import { ReactUtils } from '@etsoo/react';
 
 /**
  * Extended select component props
@@ -183,7 +184,12 @@ export function SelectEx<
     }
 
     // Value state
-    const [valueState, setValueState] = React.useState<unknown>();
+    const [valueState, setValueStateBase] = React.useState<unknown>();
+    const valueRef = React.useRef<unknown>();
+    const setValueState = (newValue: unknown) => {
+        valueRef.current = newValue;
+        setValueStateBase(newValue);
+    };
 
     React.useEffect(() => {
         if (localValue != null) setValueState(localValue);
@@ -201,23 +207,23 @@ export function SelectEx<
     // Change handler
     const handleChange = (event: SelectChangeEvent<unknown>) => {
         const value = event.target.value;
-        if (multiple && !Array.isArray(value)) setItemValue([value]);
-        else setItemValue(value);
+        if (multiple && !Array.isArray(value)) return setItemValue([value]);
+        else return setItemValue(value);
     };
 
     // Set item
     const setItemValue = (id: unknown) => {
-        if (id != valueState) {
+        if (id != valueRef.current) {
             setValueState(id);
 
-            /*
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
-            */
+            return true;
         }
+        return false;
     };
 
     // Get option id
@@ -314,8 +320,14 @@ export function SelectEx<
                             // event.preventDefault() will block executing
                             if (event.defaultPrevented) return;
                         }
-                        doItemChange(localOptions, event.target.value, true);
-                        handleChange(event);
+
+                        if (handleChange(event)) {
+                            doItemChange(
+                                localOptions,
+                                event.target.value,
+                                true
+                            );
+                        }
                     }}
                     renderValue={(selected) => {
                         // The text shows up