fix: solve nested form elements
@@ -160,6 +160,7 @@ const useModalModelCreate = ({ onClose }: Props = {}): ModalHooks => {
// We always render the form regardless of mode to provide a reference to it.
return (
+ <>
<Form autoComplete="off" form={form} id={FORM_ID} layout="vertical">
<p className={css.directions}>
Create a registered model to organize important checkpoints.
@@ -173,7 +174,13 @@ const useModalModelCreate = ({ onClose }: Props = {}): ModalHooks => {
<Form.Item label="Description (optional)" name="description">
<Input.TextArea onChange={handleDescriptionChange} />
</Form.Item>
- {expandDetails ? (
+ {!expandDetails && (
+ <p className={css.expandDetails} onClick={openDetails}>
+ Add More Details...
+ </p>
+ )}
+ </Form>
+ {expandDetails && (
<>
<div>
<h2>
@@ -192,12 +199,8 @@ const useModalModelCreate = ({ onClose }: Props = {}): ModalHooks => {
<EditableTagList tags={tags} onChange={handleTagsChange} />
</div>
</>
- ) : (
- <p className={css.expandDetails} onClick={openDetails}>
- Add More Details...
- </p>
)}
- </Form>
+ </>
);
},
[
