fix: add scroll into view when editing label in settings page (#660)

apps/app/components/labels/create-update-label-inline.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { forwardRef, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
@@ -31,12 +31,12 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "#ff0000",
 };
 
-export const CreateUpdateLabelInline: React.FC<Props> = ({
+type Ref = HTMLDivElement;
-  labelForm,
+
-  setLabelForm,
+export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpdateLabelInline(
-  isUpdating,
+  { labelForm, setLabelForm, isUpdating, labelToUpdate },
-  labelToUpdate,
+  ref
-}) => {
+) {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -109,9 +109,10 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex items-center gap-2 rounded-[10px] border bg-white p-5 ${
+      className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border bg-white p-5 ${
         labelForm ? "" : "hidden"
       }`}
+      ref={ref}
     >
       <div className="h-8 w-8 flex-shrink-0">
         <Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
@@ -187,4 +188,4 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
       )}
     </div>
   );
-};
+});

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 
 import { useRouter } from "next/router";
 
@@ -46,6 +46,8 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const scollToRef = useRef<HTMLDivElement>(null);
+
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
@@ -128,6 +130,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
                 setLabelForm={setLabelForm}
                 isUpdating={isUpdating}
                 labelToUpdate={labelToUpdate}
+                ref={scollToRef}
               />
             )}
             <>
@@ -142,7 +145,12 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
                           key={label.id}
                           label={label}
                           addLabelToGroup={() => addLabelToGroup(label)}
-                          editLabel={editLabel}
+                          editLabel={(label) => {
+                            editLabel(label);
+                            scollToRef.current?.scrollIntoView({
+                              behavior: "smooth",
+                            });
+                          }}
                           handleLabelDelete={handleLabelDelete}
                         />
                       );
@@ -153,7 +161,12 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
                         label={label}
                         labelChildren={children}
                         addLabelToGroup={addLabelToGroup}
-                        editLabel={editLabel}
+                        editLabel={(label) => {
+                          editLabel(label);
+                          scollToRef.current?.scrollIntoView({
+                            behavior: "smooth",
+                          });
+                        }}
                         handleLabelDelete={handleLabelDelete}
                       />
                     );