🐛 fix: socials input box unfocusing on input

The event CANVAS_EDIT_SECTION gets called every time the value of the social input box gets changed to update the UI, which updates the currently selected secton, which in turn updates the editor panel, causing the input boxes to unnecessarily refresh, thus unfocusing. Memoizing fixes these unnecessary rebuilds.

Fixes #139

Author: alettsy

src/features/socials/panel/views/editing/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { AnimatePresence, Reorder } from 'framer-motion';
 
 import { GroupFields } from 'components';
@@ -13,6 +13,7 @@ import { useCanvas, useForceUpdate } from 'hooks';
 import { getDeepObjectProperty, getSocialImgUrl } from 'utils';
 
 import { fields, getIconFields } from './fields';
+import React from 'react';
 
 type Social = {
   icon: string;
@@ -23,6 +24,57 @@ type Socials = {
   [key: string]: Social;
 };
 
+interface MemoizedIconEditorProps {
+  social: string;
+  props: Social;
+  index: number;
+  iconEditorRefs: React.MutableRefObject<IconEditorRef[]>;
+}
+
+const MemoizedIconEditor = React.memo(
+  function MemoizedIconEditor({
+    social,
+    props,
+    index,
+    iconEditorRefs,
+  }: MemoizedIconEditorProps) {
+    const { icon, short_name } = props;
+
+    return (
+      <IconEditor
+        key={social}
+        id={social}
+        label={short_name ?? social}
+        baseEditPath="content.socials"
+        img={{
+          alt: `${social} ${icon} logo`,
+          url: getSocialImgUrl('icon', social, { icon }),
+        }}
+        slots={{
+          expansibleContent: () => (
+            <>
+              {getIconFields(social).map(group => (
+                <GroupFields key={group.id} {...group} />
+              ))}
+            </>
+          ),
+        }}
+        ref={ref => {
+          iconEditorRefs.current[index] = ref!;
+        }}
+        refs={iconEditorRefs.current}
+      />
+    );
+  },
+  (prevProps: MemoizedIconEditorProps, nextProps: MemoizedIconEditorProps) => {
+    if (prevProps.social !== nextProps.social) return false;
+    if (prevProps.index !== nextProps.index) return false;
+    if (prevProps.props.icon !== nextProps.props.icon) return false;
+    if (prevProps.props.short_name !== nextProps.props.short_name) return false;
+    return true;
+  }
+);
+
 export function Editing() {
   const iconEditorRefs = useRef<IconEditorRef[]>([]);
 
@@ -34,8 +86,15 @@ export function Editing() {
     'props.content.socials'
   )!;
 
-  const socials = Object.entries(selectedSocials);
-  const socials_names = socials.map(social => social[0]);
+  const socialsLength = Object.keys(selectedSocials).length;
+
+  const memoizedSocialData = useMemo(() => {
+    const currentSocials = Object.entries(selectedSocials);
+    const currentSocialsNames = currentSocials.map(social => social[0]);
+    return { socials: currentSocials, socials_names: currentSocialsNames };
+  }, [socialsLength]);
+
+  const { socials, socials_names } = memoizedSocialData;
 
   function onReOrder(order: typeof socials_names) {
     const path = 'content.socials';
@@ -61,31 +120,13 @@ export function Editing() {
       <AnimatePresence>
         <Reorder.Group axis="y" values={socials_names} onReorder={onReOrder}>
           {socials.map(([social, props], index) => {
-            const { icon, short_name } = props;
-
             return (
-              <IconEditor
+              <MemoizedIconEditor
                 key={social}
-                id={social}
-                label={short_name ?? social}
-                baseEditPath="content.socials"
-                img={{
-                  alt: `${social} ${icon} logo`,
-                  url: getSocialImgUrl('icon', social, { icon }),
-                }}
-                slots={{
-                  expansibleContent: () => (
-                    <>
-                      {getIconFields(social).map(group => (
-                        <GroupFields key={group.id} {...group} />
-                      ))}
-                    </>
-                  ),
-                }}
-                ref={ref => {
-                  iconEditorRefs.current[index] = ref!;
-                }}
-                refs={iconEditorRefs.current}
+                social={social}
+                props={props}
+                index={index}
+                iconEditorRefs={iconEditorRefs}
               />
             );
           })}