@etsoo/materialui 1.0.58 → 1.0.59

package/__tests__/SelectEx.tsx

@@ -2,7 +2,7 @@ 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 { ListType1, Utils } from '@etsoo/shared';
 import { act } from 'react-dom/test-utils';
 
 it('Render SelectEx', async () => {
@@ -54,16 +54,16 @@ it('Render SelectEx', async () => {
 
 it('Render multiple SelectEx', async () => {
     // Arrange
-    type T = { id: number; name: string };
+    type T = ListType1;
     const options: T[] = [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' },
-        { id: 3, name: 'Name 3' }
+        { id: '1', label: 'Name 1' },
+        { id: '2', label: 'Name 2' },
+        { id: '3', label: 'Name 3' }
     ];
 
     const itemChangeCallback = jest.fn((option, userAction) => {
-        if (userAction) expect(option.id).toBe(3);
-        else expect(option.id).toBe(1);
+        if (userAction) expect(option.id).toBe('3');
+        else expect(option.id).toBe('1');
     });
 
     // Render component
@@ -72,10 +72,8 @@ it('Render multiple SelectEx', async () => {
             options={options}
             name="test"
             onItemChange={itemChangeCallback}
-            value={[1, 2]}
+            value={['1', '2']}
             multiple
-            search
-            labelField="name"
         />
     );
 

package/lib/SelectEx.js

@@ -46,13 +46,7 @@ export function SelectEx(props) {
     }, [options, propertyWay]);
     // Local value
     const v = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    const valueSource = multiple
-        ? v
-            ? Array.isArray(v)
-                ? v
-                : [v]
-            : []
-        : v !== null && v !== void 0 ? v : '';
+    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v !== null && v !== void 0 ? v : ''), [multiple, v]);
     // Value state
     const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();
@@ -69,7 +63,7 @@ export function SelectEx(props) {
     // Set item
     const setItemValue = (id) => {
         var _a;
-        if (id != valueRef.current) {
+        if (id !== valueRef.current) {
             // Difference
             const diff = multiple
                 ? Utils.arrayDifferences(id, valueRef.current)
@@ -130,7 +124,7 @@ export function SelectEx(props) {
             isMounted.current = false;
             input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
         };
-    }, []);
+    }, [multiple]);
     // Layout
     return (React.createElement(Stack, { direction: "row" },
         React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
@@ -149,7 +143,10 @@ export function SelectEx(props) {
                             return;
                     }
                     // Set item value
-                    const diff = setItemValue(event.target.value);
+                    const value = event.target.value;
+                    if (multiple && !Array.isArray(value))
+                        return;
+                    const diff = setItemValue(value);
                     if (diff != null) {
                         doItemChange(localOptions, diff, true);
                     }

package/package.json

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

package/src/SelectEx.tsx

@@ -177,13 +177,10 @@ export function SelectEx<
 
     // Local value
     const v = defaultValue ?? value;
-    const valueSource = multiple
-        ? v
-            ? Array.isArray(v)
-                ? v
-                : [v]
-            : []
-        : v ?? '';
+    const valueSource = React.useMemo(
+        () => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ''),
+        [multiple, v]
+    );
 
     // Value state
     const [valueState, setValueStateBase] =
@@ -203,7 +200,7 @@ export function SelectEx<
 
     // Set item
     const setItemValue = (id: unknown) => {
-        if (id != valueRef.current) {
+        if (id !== valueRef.current) {
             // Difference
             const diff = multiple
                 ? Utils.arrayDifferences(
@@ -272,7 +269,7 @@ export function SelectEx<
             isMounted.current = false;
             input?.removeEventListener('change', inputChange);
         };
-    }, []);
+    }, [multiple]);
 
     // Layout
     return (
@@ -324,7 +321,10 @@ export function SelectEx<
                         }
 
                         // Set item value
-                        const diff = setItemValue(event.target.value);
+                        const value = event.target.value;
+                        if (multiple && !Array.isArray(value)) return;
+
+                        const diff = setItemValue(value);
                         if (diff != null) {
                             doItemChange(localOptions, diff, true);
                         }