@etsoo/materialui 1.5.97 → 1.5.99

package/lib/cjs/ComboBox.js

@@ -124,7 +124,7 @@ function ComboBox(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/cjs/ComboBoxMultiple.js

@@ -121,7 +121,7 @@ function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none", width: 1 }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue

package/lib/cjs/InputField.d.ts

@@ -5,21 +5,17 @@ import { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
     /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
+     * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
      */
-    changeDelay?: number;
+    changeDelay?: [number, number?];
     /**
-     * Change delay handler, without it onChange will be applied
+     * Change delay handler
      */
     onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
     readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
 };
 /**
  * Input field

package/lib/cjs/InputField.js

@@ -16,31 +16,29 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
     const createDelayed = () => {
-        if (changeDelay != null && changeDelay >= 1) {
-            const changeHandler = onChangeDelay ?? onChange;
-            if (changeHandler)
-                return (0, react_1.useDelayedExecutor)(changeHandler, changeDelay);
+        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+            return (0, react_1.useDelayedExecutor)(onChangeDelay, changeDelay[0]);
         }
         return undefined;
     };
     const delayed = createDelayed();
     const onChangeEx = (event) => {
-        // Min characters check
-        const len = event.target.value.length;
-        if (len > 0 && len < minChars) {
-            // Avoid to trigger the form change event
-            event.stopPropagation();
-            event.preventDefault();
-            return;
+        // Change handler
+        onChange?.(event);
+        if (onChangeDelay && changeDelay && delayed) {
+            const [_, minChars = 0] = changeDelay;
+            if (minChars > 0) {
+                const len = event.target.value.length;
+                if (len < minChars)
+                    return;
+            }
+            delayed.call(undefined, event);
         }
-        if (onChange && (delayed == null || onChangeDelay != null))
-            onChange(event);
-        delayed?.call(undefined, event);
     };
     react_2.default.useEffect(() => {
         return () => {
@@ -51,7 +49,7 @@ function InputField(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
             htmlInput: {
-                ["data-min-chars"]: minChars,
+                ["data-min-chars"]: changeDelay?.[1],
                 ...htmlInput,
                 ...inputProps
             },

package/lib/cjs/InputTipField.js

@@ -35,7 +35,7 @@ function InputTipField(props) {
     const [anchorEl, setAnchorEl] = react_1.default.useState();
     const [data, setData] = react_1.default.useState();
     // Destruct
-    const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
+    const { component = "input", componentProps, changeDelay, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }

package/lib/cjs/IntInputField.js

@@ -18,7 +18,7 @@ const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
  */
 function IntInputField(props) {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = react_1.default.useState();
     const setValue = (value, source, init = false) => {

package/lib/cjs/ListMultipler.js

@@ -57,5 +57,5 @@ function ListMultipler(props) {
     }
     const inputType = typeof ids[0] === "string" ? "text" : "number";
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(List_1.default, { ...rest, children: [name && ((0, jsx_runtime_1.jsx)("input", { type: inputType, style: { display: "none", width: 1 }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { ...listItemProps, children: (0, jsx_runtime_1.jsxs)(ListItemButton_1.default, { dense: true, onClick: () => handleToggle(u[idField]), children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+    return ((0, jsx_runtime_1.jsxs)(List_1.default, { ...rest, children: [name && ((0, jsx_runtime_1.jsx)("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { ...listItemProps, children: (0, jsx_runtime_1.jsxs)(ListItemButton_1.default, { dense: true, onClick: () => handleToggle(u[idField]), children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
 }

package/lib/cjs/QuickList.js

@@ -40,7 +40,7 @@ function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();

package/lib/cjs/SearchBar.js

@@ -152,12 +152,6 @@ function SearchBar(props) {
         let newIndex = others;
         for (let c = 0; c < others; c++) {
             const child = children[c];
-            // Ignore it when it's input and hidden or display none
-            if (child instanceof HTMLInputElement &&
-                (child.type === "hidden" ||
-                    (child.parentElement == null && child.readOnly))) {
-                continue;
-            }
             const cachedWidth = child.getAttribute(cachedWidthName);
             let childWidth;
             if (cachedWidth) {

package/lib/cjs/TagList.d.ts

@@ -12,7 +12,7 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/cjs/TagList.js

@@ -20,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -54,7 +54,7 @@ function TagList(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/cjs/TagListPro.d.ts

@@ -13,7 +13,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/cjs/TagListPro.js

@@ -56,7 +56,7 @@ function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/cjs/Tiplist.js

@@ -77,8 +77,12 @@ function Tiplist(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -172,7 +176,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom
@@ -197,7 +201,7 @@ function Tiplist(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                }, loading: states.loading, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                     if (item[idField] === "n/a")
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/cjs/TiplistPro.js

@@ -66,8 +66,12 @@ function TiplistPro(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -158,7 +162,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);
@@ -189,7 +193,7 @@ function TiplistPro(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                         if (states.value == null && onChange)
                             onChange(event, event.target.value, "blur", undefined);
                     }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, getOptionDisabled: (item) => {

package/lib/mjs/ComboBox.js

@@ -118,7 +118,7 @@ export function ComboBox(props) {
         };
     }, []);
     // Layout
-    return (_jsxs(React.Fragment, { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/mjs/ComboBoxMultiple.js

@@ -115,7 +115,7 @@ export function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return (_jsxs(React.Fragment, { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none", width: 1 }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { value: stateValue == null
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue

package/lib/mjs/InputField.d.ts

@@ -5,21 +5,17 @@ import { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
     /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
+     * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
      */
-    changeDelay?: number;
+    changeDelay?: [number, number?];
     /**
-     * Change delay handler, without it onChange will be applied
+     * Change delay handler
      */
     onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
     readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
 };
 /**
  * Input field

package/lib/mjs/InputField.js

@@ -10,31 +10,29 @@ import TextField from "@mui/material/TextField";
  */
 export function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
     const createDelayed = () => {
-        if (changeDelay != null && changeDelay >= 1) {
-            const changeHandler = onChangeDelay ?? onChange;
-            if (changeHandler)
-                return useDelayedExecutor(changeHandler, changeDelay);
+        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+            return useDelayedExecutor(onChangeDelay, changeDelay[0]);
         }
         return undefined;
     };
     const delayed = createDelayed();
     const onChangeEx = (event) => {
-        // Min characters check
-        const len = event.target.value.length;
-        if (len > 0 && len < minChars) {
-            // Avoid to trigger the form change event
-            event.stopPropagation();
-            event.preventDefault();
-            return;
+        // Change handler
+        onChange?.(event);
+        if (onChangeDelay && changeDelay && delayed) {
+            const [_, minChars = 0] = changeDelay;
+            if (minChars > 0) {
+                const len = event.target.value.length;
+                if (len < minChars)
+                    return;
+            }
+            delayed.call(undefined, event);
         }
-        if (onChange && (delayed == null || onChangeDelay != null))
-            onChange(event);
-        delayed?.call(undefined, event);
     };
     React.useEffect(() => {
         return () => {
@@ -45,7 +43,7 @@ export function InputField(props) {
     // Layout
     return (_jsx(TextField, { slotProps: {
             htmlInput: {
-                ["data-min-chars"]: minChars,
+                ["data-min-chars"]: changeDelay?.[1],
                 ...htmlInput,
                 ...inputProps
             },

package/lib/mjs/InputTipField.js

@@ -29,7 +29,7 @@ export function InputTipField(props) {
     const [anchorEl, setAnchorEl] = React.useState();
     const [data, setData] = React.useState();
     // Destruct
-    const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
+    const { component = "input", componentProps, changeDelay, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }

package/lib/mjs/IntInputField.js

@@ -12,7 +12,7 @@ import IconButton from "@mui/material/IconButton";
  */
 export function IntInputField(props) {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = React.useState();
     const setValue = (value, source, init = false) => {

package/lib/mjs/ListMultipler.js

@@ -51,5 +51,5 @@ export function ListMultipler(props) {
     }
     const inputType = typeof ids[0] === "string" ? "text" : "number";
     // Layout
-    return (_jsxs(List, { ...rest, children: [name && (_jsx("input", { type: inputType, style: { display: "none", width: 1 }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => (_jsx(ListItem, { ...listItemProps, children: _jsxs(ListItemButton, { dense: true, onClick: () => handleToggle(u[idField]), children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), _jsx(ListItemText, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+    return (_jsxs(List, { ...rest, children: [name && (_jsx("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => (_jsx(ListItem, { ...listItemProps, children: _jsxs(ListItemButton, { dense: true, onClick: () => handleToggle(u[idField]), children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), _jsx(ListItemText, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
 }

package/lib/mjs/QuickList.js

@@ -34,7 +34,7 @@ export function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();

package/lib/mjs/SearchBar.js

@@ -146,12 +146,6 @@ export function SearchBar(props) {
         let newIndex = others;
         for (let c = 0; c < others; c++) {
             const child = children[c];
-            // Ignore it when it's input and hidden or display none
-            if (child instanceof HTMLInputElement &&
-                (child.type === "hidden" ||
-                    (child.parentElement == null && child.readOnly))) {
-                continue;
-            }
             const cachedWidth = child.getAttribute(cachedWidthName);
             let childWidth;
             if (cachedWidth) {

package/lib/mjs/TagList.d.ts

@@ -12,7 +12,7 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/mjs/TagList.js

@@ -14,7 +14,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -48,7 +48,7 @@ export function TagList(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/mjs/TagListPro.d.ts

@@ -13,7 +13,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/mjs/TagListPro.js

@@ -50,7 +50,7 @@ export function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/mjs/Tiplist.js

@@ -71,8 +71,12 @@ export function Tiplist(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -166,7 +170,7 @@ export function Tiplist(props) {
         };
     }, []);
     // Layout
-    return (_jsxs(React.Fragment, { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom
@@ -191,7 +195,7 @@ export function Tiplist(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => search ? (_jsx(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                }, loading: states.loading, renderInput: (params) => search ? (_jsx(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                     if (item[idField] === "n/a")
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/mjs/TiplistPro.js

@@ -60,8 +60,12 @@ export function TiplistPro(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -152,7 +156,7 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (_jsxs(React.Fragment, { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none", width: 1 }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);
@@ -183,7 +187,7 @@ export function TiplistPro(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                         if (states.value == null && onChange)
                             onChange(event, event.target.value, "blur", undefined);
                     }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, getOptionDisabled: (item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.97",
+  "version": "1.5.99",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ComboBox.tsx

@@ -236,12 +236,12 @@ export function ComboBox<
 
   // Layout
   return (
-    <React.Fragment>
+    <div style={{ flex: 2 }}>
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
         type={idIsString ? "text" : "number"}
-        style={{ display: "none", width: 1 }}
+        style={{ display: "none" }}
         name={name}
         value={getValue(stateValue)}
         readOnly
@@ -311,6 +311,6 @@ export function ComboBox<
           </IconButton>
         )}
       </Stack>
-    </React.Fragment>
+    </div>
   );
 }

package/src/ComboBoxMultiple.tsx

@@ -239,12 +239,12 @@ export function ComboBoxMultiple<
 
   // Layout
   return (
-    <React.Fragment>
+    <div style={{ flex: 2 }}>
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
         type="text"
-        style={{ display: "none", width: 1 }}
+        style={{ display: "none" }}
         name={name}
         value={getValue(stateValue)}
         readOnly
@@ -306,6 +306,6 @@ export function ComboBoxMultiple<
         loadingText={loadingText}
         {...rest}
       />
-    </React.Fragment>
+    </div>
   );
 }

package/src/InputField.tsx

@@ -8,12 +8,12 @@ import TextField, { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
   /**
-   * Change delay (ms) to avoid repeatly dispatch onChange
+   * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
    */
-  changeDelay?: number;
+  changeDelay?: [number, number?];
 
   /**
-   * Change delay handler, without it onChange will be applied
+   * Change delay handler
    */
   onChangeDelay?: React.ChangeEventHandler<
     HTMLTextAreaElement | HTMLInputElement
@@ -23,11 +23,6 @@ export type InputFieldProps = TextFieldProps & {
    * Is the field read only?
    */
   readOnly?: boolean;
-
-  /**
-   * Minimum characters to trigger the change event
-   */
-  minChars?: number;
 };
 
 /**
@@ -41,13 +36,12 @@ export function InputField(props: InputFieldProps) {
     InputProps = {},
     inputProps = {},
     slotProps,
-    changeDelay,
     onChange,
     onChangeDelay,
+    changeDelay = onChangeDelay ? [480] : undefined,
     readOnly,
     size = MUGlobal.inputFieldSize,
     variant = MUGlobal.inputFieldVariant,
-    minChars = 0,
     ...rest
   } = props;
 
@@ -56,9 +50,8 @@ export function InputField(props: InputFieldProps) {
 
   const isMounted = React.useRef(true);
   const createDelayed = () => {
-    if (changeDelay != null && changeDelay >= 1) {
-      const changeHandler = onChangeDelay ?? onChange;
-      if (changeHandler) return useDelayedExecutor(changeHandler, changeDelay);
+    if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+      return useDelayedExecutor(onChangeDelay, changeDelay[0]);
     }
     return undefined;
   };
@@ -67,17 +60,19 @@ export function InputField(props: InputFieldProps) {
   const onChangeEx = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    // Min characters check
-    const len = event.target.value.length;
-    if (len > 0 && len < minChars) {
-      // Avoid to trigger the form change event
-      event.stopPropagation();
-      event.preventDefault();
-      return;
-    }
+    // Change handler
+    onChange?.(event);
 
-    if (onChange && (delayed == null || onChangeDelay != null)) onChange(event);
-    delayed?.call(undefined, event);
+    if (onChangeDelay && changeDelay && delayed) {
+      const [_, minChars = 0] = changeDelay;
+
+      if (minChars > 0) {
+        const len = event.target.value.length;
+        if (len < minChars) return;
+      }
+
+      delayed.call(undefined, event);
+    }
   };
 
   React.useEffect(() => {
@@ -92,7 +87,7 @@ export function InputField(props: InputFieldProps) {
     <TextField
       slotProps={{
         htmlInput: {
-          ["data-min-chars"]: minChars,
+          ["data-min-chars"]: changeDelay?.[1],
           ...htmlInput,
           ...inputProps
         },

package/src/InputTipField.tsx

@@ -96,7 +96,7 @@ export function InputTipField<T extends ItemType = ItemType>(
   const {
     component = "input",
     componentProps,
-    changeDelay = 480,
+    changeDelay,
     onChangeDelay,
     fullWidth = true,
     slotProps = {},

package/src/IntInputField.tsx

@@ -87,7 +87,7 @@ export function IntInputField(props: IntInputFieldProps) {
     endSymbol,
     symbol,
     value,
-    changeDelay = 600,
+    changeDelay = [600],
     onChangeDelay,
     onChange,
     onFocus = (event) => event.currentTarget.select(),

package/src/ListMultipler.tsx

@@ -124,7 +124,7 @@ export function ListMultipler<T extends object>(props: ListMultiplerProps<T>) {
       {name && (
         <input
           type={inputType}
-          style={{ display: "none", width: 1 }}
+          style={{ display: "none" }}
           name={name}
           value={ids.join(",")}
           readOnly

package/src/QuickList.tsx

@@ -118,11 +118,11 @@ export function QuickList<T extends ListType2 = ListType2>(
     <VBox gap={gap} height={height} {...rest}>
       <InputField
         label={label}
-        changeDelay={480}
         onChangeDelay={(event) => {
           // Stop bubble
           event.preventDefault();
           event.stopPropagation();
+
           loadDataLocal(event.target.value);
         }}
         fullWidth

package/src/SearchBar.tsx

@@ -233,16 +233,6 @@ export function SearchBar(props: SearchBarProps) {
     let newIndex: number = others;
     for (let c: number = 0; c < others; c++) {
       const child = children[c];
-
-      // Ignore it when it's input and hidden or display none
-      if (
-        child instanceof HTMLInputElement &&
-        (child.type === "hidden" ||
-          (child.parentElement == null && child.readOnly))
-      ) {
-        continue;
-      }
-
       const cachedWidth = child.getAttribute(cachedWidthName);
       let childWidth: number;
       if (cachedWidth) {

package/src/TagList.tsx

@@ -27,7 +27,7 @@ export type TagListProps = Omit<
   /**
    * Input props
    */
-  inputProps?: Omit<InputFieldProps, "onChange">;
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
 
   /**
    * Max items
@@ -62,7 +62,7 @@ export function TagList(props: TagListProps) {
         {option}
       </li>
     ),
-    renderTags = (value: readonly string[], getTagProps) =>
+    renderValue = (value: readonly string[], getTagProps) =>
       value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return <Chip variant="outlined" key={key} label={option} {...rest} />;
@@ -129,12 +129,11 @@ export function TagList(props: TagListProps) {
       clearOnBlur
       openOnFocus={openOnFocus}
       renderOption={renderOption}
-      renderTags={renderTags}
+      renderValue={renderValue}
       renderInput={(params) => (
         <InputField
           label={label}
-          changeDelay={480}
-          onChange={async (event) => {
+          onChangeDelay={async (event) => {
             // Stop bubble
             event.preventDefault();
             event.stopPropagation();

package/src/TagListPro.tsx

@@ -28,7 +28,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   /**
    * Input props
    */
-  inputProps?: Omit<InputFieldProps, "onChange">;
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
 
   /**
    * Max items
@@ -147,8 +147,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
       renderInput={(params) => (
         <InputField
           label={label}
-          changeDelay={480}
-          onChange={async (event) => {
+          onChangeDelay={async (event) => {
             // Stop bubble
             event.preventDefault();
             event.stopPropagation();

package/src/Tiplist.tsx

@@ -177,8 +177,13 @@ export function Tiplist<
     // Stop bubble
     event.stopPropagation();
 
+    const value = event.currentTarget.value;
+    if (minChars && minChars > 0 && value.length < minChars) {
+      return;
+    }
+
     // Call with delay
-    delayed.call(undefined, event.currentTarget.value);
+    delayed.call(undefined, value);
   };
 
   // Directly load data
@@ -285,12 +290,12 @@ export function Tiplist<
 
   // Layout
   return (
-    <React.Fragment>
+    <div style={{ flex: 2 }}>
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
         type={idIsString ? "text" : "number"}
-        style={{ display: "none", width: 1 }}
+        style={{ display: "none" }}
         name={name}
         value={`${
           inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")
@@ -349,7 +354,6 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
-              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}
@@ -363,7 +367,6 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
-              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}
@@ -393,6 +396,6 @@ export function Tiplist<
         getOptionKey={getOptionKey}
         {...rest}
       />
-    </React.Fragment>
+    </div>
   );
 }

package/src/TiplistPro.tsx

@@ -194,8 +194,13 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     // Stop bubble
     event.stopPropagation();
 
+    const value = event.currentTarget.value;
+    if (minChars && minChars > 0 && value.length < minChars) {
+      return;
+    }
+
     // Call with delay
-    delayed.call(undefined, event.currentTarget.value);
+    delayed.call(undefined, value);
   };
 
   // Directly load data
@@ -299,12 +304,12 @@ export function TiplistPro<T extends ListType2 = ListType2>(
 
   // Layout
   return (
-    <React.Fragment>
+    <div style={{ flex: 2 }}>
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
         type={idIsString ? "text" : "number"}
-        style={{ display: "none", width: 1 }}
+        style={{ display: "none" }}
         name={name}
         value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}
         readOnly
@@ -363,7 +368,6 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         loading={states.loading}
         renderInput={(params) => (
           <InputField
-            minChars={minChars}
             {...inputProps}
             {...params}
             onChange={changeHandle}
@@ -394,6 +398,6 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         }}
         {...rest}
       />
-    </React.Fragment>
+    </div>
   );
 }