@etsoo/react 1.2.57 → 1.2.58

package/lib/mu/ComboBox.js

@@ -10,7 +10,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'new-region', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, options = [], readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options = [], readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -27,7 +27,11 @@ export function ComboBox(props) {
     const localIdValue = localValue && Reflect.get(localValue, idField);
     // State
     // null for controlled
-    const [stateValue, setStateValue] = React.useState(localValue);
+    const [stateValue, setStateValue] = React.useState(null);
+    React.useEffect(() => {
+        if (localValue != null)
+            setStateValue(localValue);
+    }, [localValue]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

package/lib/mu/SelectEx.d.ts

@@ -4,7 +4,7 @@ import { IdLabelDto } from '@etsoo/appscript';
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends Record<string, any> = IdLabelDto> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Id field, default is id
      */
@@ -43,4 +43,4 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto> exten
  * @param props Props
  * @returns Component
  */
-export declare function SelectEx<T extends Record<string, any> = IdLabelDto>(props: SelectExProps<T>): JSX.Element;
+export declare function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>): JSX.Element;

package/lib/mu/SelectEx.js

@@ -28,7 +28,11 @@ export function SelectEx(props) {
         localValue = valueSource;
     }
     // Value state
-    const [valueState, setValueState] = React.useState(localValue);
+    const [valueState, setValueState] = React.useState(null);
+    React.useEffect(() => {
+        if (localValue != null)
+            setValueState(localValue);
+    }, [localValue]);
     // Label id
     const labelId = `selectex-label-${name}`;
     // Item checked or not

package/lib/mu/Tiplist.js

@@ -26,8 +26,12 @@ export function Tiplist(props) {
         // Loading unknown
         open: false,
         options: [],
-        value: localValue
+        value: null
     });
+    React.useEffect(() => {
+        if (localValue != null)
+            stateUpdate({ value: localValue });
+    }, [localValue]);
     // State
     const [state] = React.useState({});
     const isMounted = React.useRef(true);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.57",
+    "version": "1.2.58",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/ComboBox.tsx

@@ -43,7 +43,6 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         search = false,
         idField = 'id',
         idValue,
-        inputAutoComplete = 'new-region',
         inputError,
         inputHelperText,
         inputMargin,
@@ -56,6 +55,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         loadData,
         onLoadData,
         name,
+        inputAutoComplete = 'off',
         options = [],
         readOnly = true,
         onChange,
@@ -86,7 +86,11 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
     // State
     // null for controlled
-    const [stateValue, setStateValue] = React.useState(localValue);
+    const [stateValue, setStateValue] = React.useState<T | null>(null);
+
+    React.useEffect(() => {
+        if (localValue != null) setStateValue(localValue);
+    }, [localValue]);
 
     // Add readOnly
     const addReadOnly = (params: AutocompleteRenderInputParams) => {

package/src/mu/SelectEx.tsx

@@ -18,7 +18,7 @@ import { ListItemRightIcon } from './ListItemRightIcon';
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends Record<string, any> = IdLabelDto>
+export interface SelectExProps<T extends {}>
     extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Id field, default is id
@@ -66,9 +66,7 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto>
  * @param props Props
  * @returns Component
  */
-export function SelectEx<T extends Record<string, any> = IdLabelDto>(
-    props: SelectExProps<T>
-) {
+export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
     // Destruct
     const {
         defaultValue,
@@ -103,7 +101,11 @@ export function SelectEx<T extends Record<string, any> = IdLabelDto>(
     }
 
     // Value state
-    const [valueState, setValueState] = React.useState(localValue);
+    const [valueState, setValueState] = React.useState<unknown | null>(null);
+
+    React.useEffect(() => {
+        if (localValue != null) setValueState(localValue);
+    }, [localValue]);
 
     // Label id
     const labelId = `selectex-label-${name}`;

package/src/mu/Tiplist.tsx

@@ -78,10 +78,14 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
             // Loading unknown
             open: false,
             options: [],
-            value: localValue
+            value: null
         }
     );
 
+    React.useEffect(() => {
+        if (localValue != null) stateUpdate({ value: localValue });
+    }, [localValue]);
+
     // State
     const [state] = React.useState<{
         loadDataSeed?: number;