chore(web): fix timeline field component's popover (#821)

reearth · Nov 17, 2023 · a38df11 · a38df11
1 parent 67a0d61
commit a38df11
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 46 deletions.
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
@@ -62,7 +62,7 @@ const DateTimeField: React.FC<Props> = ({ name, description, value, onChange })
               />
             </InputWrapper>
           </Popover.Trigger>
-          <Popover.Content autoFocus={false}>
+          <Popover.Content autoFocus={false} attachToRoot>
             {open && (
               <EditPanel
                 setDateTime={setDateTime}

diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
@@ -33,54 +33,49 @@ const EditPanel = ({
   });
 
   return (
-    <Wrapper>
-      <Modal
-        isVisible={isVisible}
-        size="sm"
-        title={t("Timeline Settings")}
-        button1={<Button text={t("Cancel")} buttonType="secondary" onClick={onClose} />}
-        button2={
-          <Button
-            text={t("Apply")}
-            buttonType="primary"
-            disabled={!isDisabled || warning}
-            onClick={onAppyChange}
-          />
-        }>
-        <FieldsWrapper>
-          <CustomDateTimeField
-            name={t("* Start Time")}
-            description={t("Start time for the timeline")}
-            onChange={newValue => handleOnChange(newValue || "", "startTime")}
-            value={timelineValues?.startTime}
-          />
-          <CustomDateTimeField
-            name={t("* Current Time")}
-            description={t("Current time should be between start and end time")}
-            onChange={newValue => handleOnChange(newValue || "", "currentTime")}
-            value={timelineValues?.currentTime}
-          />
-          <CustomDateTimeField
-            name={t("* End Time")}
-            onChange={newValue => handleOnChange(newValue || "", "endTime")}
-            description={t("End time for the timeline")}
-            value={timelineValues?.endTime}
-          />
-          {warning && (
-            <DangerItem>
-              <Icon icon="alert" size={30} />
-              {t("Please make sure the Current time must between the Start time and End Time.")}
-            </DangerItem>
-          )}
-        </FieldsWrapper>
-      </Modal>
-    </Wrapper>
+    <Modal
+      isVisible={isVisible}
+      size="sm"
+      title={t("Timeline Settings")}
+      button1={<Button text={t("Cancel")} buttonType="secondary" onClick={onClose} />}
+      button2={
+        <Button
+          text={t("Apply")}
+          buttonType="primary"
+          disabled={!isDisabled || warning}
+          onClick={onAppyChange}
+        />
+      }>
+      <FieldsWrapper>
+        <CustomDateTimeField
+          name={t("* Start Time")}
+          description={t("Start time for the timeline")}
+          onChange={newValue => handleOnChange(newValue || "", "startTime")}
+          value={timelineValues?.startTime}
+        />
+        <CustomDateTimeField
+          name={t("* Current Time")}
+          description={t("Current time should be between start and end time")}
+          onChange={newValue => handleOnChange(newValue || "", "currentTime")}
+          value={timelineValues?.currentTime}
+        />
+        <CustomDateTimeField
+          name={t("* End Time")}
+          onChange={newValue => handleOnChange(newValue || "", "endTime")}
+          description={t("End time for the timeline")}
+          value={timelineValues?.endTime}
+        />
+        {warning && (
+          <DangerItem>
+            <Icon icon="alert" size={30} />
+            {t("Please make sure the Current time must between the Start time and End Time.")}
+          </DangerItem>
+        )}
+      </FieldsWrapper>
+    </Modal>
   );
 };
 
-const Wrapper = styled.div`
-  position: relative;
-`;
 const FieldsWrapper = styled.div`
   position: relative;
 `;