@etsoo/materialui 1.1.72 → 1.1.74

package/lib/ComboBoxPro.js

@@ -14,7 +14,7 @@ export function ComboBoxPro(props) {
     const [localValue, setValue] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
     React.useEffect(() => {
-        if (value == null)
+        if (value === undefined)
             return;
         setValue(value);
     }, [value]);
@@ -24,6 +24,8 @@ export function ComboBoxPro(props) {
         const option = localOptions.find((option) => option.id === idValue);
         if (option)
             setValue(option);
+        else
+            setValue(null);
     }, [localOptions]);
     React.useEffect(() => {
         if (typeof options === "function") {
@@ -38,11 +40,14 @@ export function ComboBoxPro(props) {
             setOptions(options);
         }
     }, [options]);
-    return (React.createElement(Autocomplete, { id: name, value: localValue, open: open, freeSolo: true, onOpen: () => {
+    return (React.createElement(Autocomplete, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
             setOpen(true);
         }, onClose: () => {
             setOpen(false);
-        }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, label: label, name: name })), getOptionLabel: (item) => typeof item === "object" ? getLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+        }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, label: label, name: name, onBlur: (event) => {
+                if (localValue == null && onChange)
+                    onChange(event, event.target.value, "blur", undefined);
+            } })), getOptionLabel: (item) => typeof item === "object" ? getLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/TagList.js

@@ -30,6 +30,10 @@ export function TagList(props) {
         if (len >= maxItems) {
             result.push(moreLabel);
         }
+        else if (len === 0) {
+            // When no result, hide the popup
+            setOpen(false);
+        }
         setOptions(result);
         setLoading(false);
     };
@@ -40,7 +44,7 @@ export function TagList(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/TagListPro.js

@@ -32,6 +32,10 @@ export function TagListPro(props) {
         if (len >= maxItems) {
             result.push({ id: -1, name: moreLabel });
         }
+        else if (len === 0) {
+            // When no result, hide the popup
+            setOpen(false);
+        }
         setOptions(result);
         setLoading(false);
     };

package/package.json

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

package/src/ComboBoxPro.tsx

@@ -72,7 +72,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
   const [loading, setLoading] = React.useState(false);
 
   React.useEffect(() => {
-    if (value == null) return;
+    if (value === undefined) return;
     setValue(value);
   }, [value]);
 
@@ -80,6 +80,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
     if (idValue == null) return;
     const option = localOptions.find((option) => option.id === idValue);
     if (option) setValue(option);
+    else setValue(null);
   }, [localOptions]);
 
   React.useEffect(() => {
@@ -97,9 +98,10 @@ export function ComboBoxPro<D extends DataType = DataType>(
   return (
     <Autocomplete<D, false, false, true>
       id={name}
-      value={localValue}
+      value={localValue == null ? "" : localValue}
       open={open}
       freeSolo
+      clearOnBlur={false}
       onOpen={() => {
         setOpen(true);
       }}
@@ -110,7 +112,16 @@ export function ComboBoxPro<D extends DataType = DataType>(
       loading={loading}
       openOnFocus={openOnFocus}
       renderInput={(params) => (
-        <InputField {...inputProps} {...params} label={label} name={name} />
+        <InputField
+          {...inputProps}
+          {...params}
+          label={label}
+          name={name}
+          onBlur={(event) => {
+            if (localValue == null && onChange)
+              onChange(event, event.target.value, "blur", undefined);
+          }}
+        />
       )}
       getOptionLabel={(item) =>
         typeof item === "object" ? getLabel(item) : item

package/src/TagList.tsx

@@ -94,6 +94,9 @@ export function TagList(props: TagListProps) {
 
     if (len >= maxItems) {
       result.push(moreLabel);
+    } else if (len === 0) {
+      // When no result, hide the popup
+      setOpen(false);
     }
     setOptions(result);
     setLoading(false);
@@ -117,6 +120,7 @@ export function TagList(props: TagListProps) {
       options={options}
       loading={loading}
       disableCloseOnSelect={disableCloseOnSelect}
+      clearOnBlur
       openOnFocus={openOnFocus}
       renderOption={renderOption}
       renderTags={renderTags}

package/src/TagListPro.tsx

@@ -108,7 +108,11 @@ export function TagListPro<D extends DataType = DataType>(
 
     if (len >= maxItems) {
       result.push({ id: -1, name: moreLabel } as D);
+    } else if (len === 0) {
+      // When no result, hide the popup
+      setOpen(false);
     }
+
     setOptions(result);
     setLoading(false);
   };