@etsoo/materialui 1.6.19 → 1.6.20

package/lib/cjs/ComboBoxMultiple.js

@@ -32,6 +32,7 @@ function ComboBoxMultiple(props) {
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...restProps, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
+    const localRef = react_1.default.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = react_1.default.useState(options ?? []);
     const isMounted = react_1.default.useRef(true);
@@ -44,6 +45,11 @@ function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = react_1.default.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    react_1.default.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     react_1.default.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -58,11 +64,6 @@ function ComboBoxMultiple(props) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
-        params.inputProps.onInvalid = (event) => {
-            if (inputRequired && stateValue != null && stateValue.length > 0) {
-                event.preventDefault();
-            }
-        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (shared_1.Keyboard.isTypingContent(event.key)) {
@@ -124,5 +125,5 @@ function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

package/lib/mjs/ComboBoxMultiple.js

@@ -26,6 +26,7 @@ export function ComboBoxMultiple(props) {
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => (_jsxs("li", { ...restProps, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
+    const localRef = React.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
@@ -38,6 +39,11 @@ export function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    React.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     React.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -52,11 +58,6 @@ export function ComboBoxMultiple(props) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
-        params.inputProps.onInvalid = (event) => {
-            if (inputRequired && stateValue != null && stateValue.length > 0) {
-                event.preventDefault();
-            }
-        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (Keyboard.isTypingContent(event.key)) {
@@ -118,5 +119,5 @@ export function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

package/package.json

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

package/src/ComboBoxMultiple.tsx

@@ -132,6 +132,7 @@ export function ComboBoxMultiple<
 
   // Value input ref
   const inputRef = React.createRef<HTMLInputElement>();
+  const localRef = React.useRef<HTMLInputElement>(undefined);
 
   // Options state
   const [localOptions, setOptions] = React.useState(options ?? []);
@@ -148,6 +149,12 @@ export function ComboBoxMultiple<
   // null for controlled
   const [stateValue, setStateValue] = React.useState<T[] | null>(null);
 
+  const selectedCount = stateValue?.length ?? 0;
+  React.useEffect(() => {
+    if (localRef.current && inputRequired)
+      localRef.current.required = selectedCount === 0;
+  }, [inputRequired, selectedCount]);
+
   React.useEffect(() => {
     const localValue: T[] | null | undefined =
       idValue != null
@@ -167,12 +174,6 @@ export function ComboBoxMultiple<
 
     Object.assign(params.inputProps, { "data-reset": inputReset });
 
-    params.inputProps.onInvalid = (event) => {
-      if (inputRequired && stateValue != null && stateValue.length > 0) {
-        event.preventDefault();
-      }
-    };
-
     if (dataReadonly) {
       params.inputProps.onKeyDown = (event) => {
         if (Keyboard.isTypingContent(event.key)) {
@@ -279,6 +280,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           ) : (
             <InputField
@@ -290,6 +292,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           )
         }