@solidstarters/solid-core-ui 1.1.27 → 1.1.28

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -78,29 +78,31 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <InputTextarea
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        rows={5}
-                        cols={30}
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <InputTextarea
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={formik.handleChange}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            rows={5}
+                            cols={30}
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidMediaMultipleField.tsx

@@ -208,7 +208,7 @@ export class SolidMediaMultipleField implements ISolidField {
         const [isShowAllFiles, setShowAllFiles] = useState(false);
         return (
             <div className={className} style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-                <div className="flex flex-column gap-2 mt-4">
+                <div className="flex flex-column gap-2 mt-4 relative">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
@@ -225,6 +225,11 @@ export class SolidMediaMultipleField implements ISolidField {
                             mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
                         />
                     </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
                 </div>
                 {fileDetails.length > 0 &&
                     <div className="solid-file-upload-wrapper">
@@ -341,11 +346,6 @@ export class SolidMediaMultipleField implements ISolidField {
                         })
                     }
                 </Dialog>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )}
                 <Dialog
                     visible={isDeleteImageDialogVisible}
                     header="Confirm Delete"

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -203,7 +203,7 @@ export class SolidMediaSingleField implements ISolidField {
 
         return (
             <div className={className} style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-                <div className="flex flex-column gap-2 mt-4">
+                <div className="flex flex-column gap-2 mt-4 relative">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
@@ -226,7 +226,7 @@ export class SolidMediaSingleField implements ISolidField {
                         </div>
                     )}
                     {fileDetails && (
-                        <div className="solid-file-upload-wrapper">
+                        <div className="solid-file-upload-wrapper mt-4">
                             <div className="flex align-items-center gap-2">
                                 <FileReaderExt fileDetails={fileDetails} />
                                 <div className="w-full flex flex-column gap-1">

package/src/components/core/form/fields/SolidPasswordField.tsx

@@ -0,0 +1,113 @@
+'use client';
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { Password } from "primereact/password";
+
+export class SolidPasswordField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        // 1. required
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        } else {
+            schema = schema.nullable(); // Allow null when not required
+        }
+
+        // 2. length (min/max)
+        if (fieldMetadata.min && fieldMetadata.min > 0) {
+            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
+        }
+        if (fieldMetadata.max && fieldMetadata.max > 0) {
+            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
+        }
+        // 3. regular expression
+        if (fieldMetadata.regexPattern) {
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
+            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        return (
+            <div className={className}>
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                                {fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                            </label>
+                        }
+                        <Password
+                            id={fieldLayoutInfo.attrs.name}
+                            name={fieldMetadata.name}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            toggleMask
+                        />
+
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

package/src/components/core/form/fields/SolidRichTextField.tsx

@@ -76,28 +76,31 @@ export class SolidRichTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <Editor
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
-                        id={fieldLayoutInfo.attrs.name}
-                        value={formik.values[fieldLayoutInfo.attrs.name]}
-                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
-                        style={{ height: "320px" }}
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <Editor
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                            id={fieldLayoutInfo.attrs.name}
+                            value={formik.values[fieldLayoutInfo.attrs.name]}
+                            onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                            style={{ height: "320px" }}
+                            className="solid-custom-editor"
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -95,33 +95,35 @@ export class SolidSelectionDynamicField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
-                        suggestions={selectionDynamicItems}
-                        completeMethod={selectionDynamicSearch}
-                        // onChange={(e) => updateInputs(index, e.value)} />
-                        onChange={formik.handleChange}
-                        className="solid-standard-autocomplete"
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <AutoComplete
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                            id={fieldLayoutInfo.attrs.name}
+                            field="label"
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            dropdown
+                            suggestions={selectionDynamicItems}
+                            completeMethod={selectionDynamicSearch}
+                            // onChange={(e) => updateInputs(index, e.value)} />
+                            onChange={formik.handleChange}
+                            className="solid-standard-autocomplete"
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -100,35 +100,37 @@ export class SolidSelectionStaticField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        name={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
-                        suggestions={selectionStaticItems}
-                        completeMethod={selectionStaticSearch}
-                        // onChange={(e) => updateInputs(index, e.value)} />
-                        // onChange={formik.handleChange}
-                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                        className="solid-standard-autocomplete"
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <AutoComplete
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                            id={fieldLayoutInfo.attrs.name}
+                            name={fieldLayoutInfo.attrs.name}
+                            field="label"
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            dropdown
+                            suggestions={selectionStaticItems}
+                            completeMethod={selectionStaticSearch}
+                            // onChange={(e) => updateInputs(index, e.value)} />
+                            // onChange={formik.handleChange}
+                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                            className="solid-standard-autocomplete"
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidShortTextField.tsx

@@ -82,30 +82,32 @@ export class SolidShortTextField implements ISolidField {
         return (
             <>
                 {includeWrapper === 'yes' && <div className={className}>
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputText
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            name={fieldMetadata.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            // onChange={formik.handleChange}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        />
-                    </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <div className="relative">
+                        <div className="flex flex-column gap-2 mt-4">
+                            {showFieldLabel != false &&
+                                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                    {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                </label>
+                            }
+                            <InputText
+                                readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                disabled={formDisabled || fieldDisabled}
+                                id={fieldLayoutInfo.attrs.name}
+                                name={fieldMetadata.name}
+                                aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                // onChange={formik.handleChange}
+                                onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                                onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                                value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            />
                         </div>
-                    )}
+                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                            <div className="absolute mt-1">
+                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            </div>
+                        )}
+                    </div>
                 </div>}
                 {includeWrapper === 'no' &&
                     <>

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -61,35 +61,37 @@ export class SolidTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        hideOnDateTimeSelect
-                        timeOnly
-                        showTime className=""
-                        hourFormat="24"
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <Calendar
+                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                            ref={calendarRef} // Attach ref to Calendar
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={formik.handleChange}
+                            //@ts-ignore
+                            value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
+                            // dateFormat="mm/dd/yy"
+                            // placeholder="mm/dd/yyyy hh:mm"
+                            hideOnDateTimeSelect
+                            timeOnly
+                            showTime className=""
+                            hourFormat="24"
 
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -242,28 +242,30 @@ export class SolidRelationManyToManyField implements ISolidField {
 
             return (
                 <div className={className}>
-                    <div className="flex align-items-center gap-3">
-                        {showFieldLabel != false &&
-                            <label className="form-field-label">
-                                {capitalize(fieldLayoutInfo.attrs.name)}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            </label>
-                        }
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
-                        <div className="many-to-many-add" >
-                            {/* <Button icon="pi pi-plus"
+                    <div className="relative">
+                        <div className="flex align-items-center gap-3">
+                            {showFieldLabel != false &&
+                                <label className="form-field-label">
+                                    {capitalize(fieldLayoutInfo.attrs.name)}
+                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                </label>
+                            }
+                            {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                                this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                            }
+                            <div className="many-to-many-add" >
+                                {/* <Button icon="pi pi-plus"
                                 rounded
                                 outlined
                                 aria-label="Filter"
                                 type="button"
                                 onClick={() => autoCompleteSearch()}
                             /> */}
+                            </div>
+                        </div>
+                        <div>
+                            {options.togglerElement}
                         </div>
-                    </div>
-                    <div>
-                        {options.togglerElement}
                     </div>
                 </div>
             );

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -137,7 +137,7 @@ export class SolidRelationManyToOneField implements ISolidField {
         }
         return (
             <div className={className}>
-                <div className="mt-4">
+                <div className="mt-4 relative">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
                             {fieldLabel}