From 1d0fe18dd3f64870d20745da1021de1d20f18e55 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 20 Feb 2024 10:28:39 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20custom=20theme=20textfie?=
 =?UTF-8?q?ld=20rerendering=20(#19714)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

- Changed the textfields in custom theme settings to use onBlur instead
to trigger a rerender of the iFrame to avoid flashing.
- It will now instead update once the text field loses focus, similar to
the Announcement Bar.
---
 .../site/designAndBranding/ThemeSettings.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
index c913bc3e01..5f8f80a51d 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {ColorPickerField, Heading, Hint, ImageUpload, Select, SettingGroupContent, TextField, Toggle} from '@tryghost/admin-x-design-system';
 import {CustomThemeSetting} from '@tryghost/admin-x-framework/api/customThemeSettings';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
@@ -10,6 +10,21 @@ const ThemeSetting: React.FC<{
     setting: CustomThemeSetting,
     setSetting: <Setting extends CustomThemeSetting>(value: Setting['value']) => void
 }> = ({setting, setSetting}) => {
+    const [fieldValues, setFieldValues] = useState<{ [key: string]: string | null }>({});
+    useEffect(() => {
+        const valueAsString = setting.value === null ? '' : String(setting.value);
+        setFieldValues(values => ({...values, [setting.key]: valueAsString}));
+    }, [setting]);
+
+    const handleBlur = (key: string) => {
+        if (fieldValues[key] !== undefined) {
+            setSetting(fieldValues[key]);
+        }
+    };
+
+    const handleChange = (key: string, value: string) => {
+        setFieldValues(values => ({...values, [key]: value}));
+    };
     const {mutateAsync: uploadImage} = useUploadImage();
     const handleError = useHandleError();
 
@@ -28,8 +43,9 @@ const ThemeSetting: React.FC<{
             <TextField
                 hint={setting.description}
                 title={humanizeSettingKey(setting.key)}
-                value={setting.value || ''}
-                onChange={event => setSetting(event.target.value)}
+                value={fieldValues[setting.key] || ''}
+                onBlur={() => handleBlur(setting.key)}
+                onChange={event => handleChange(setting.key, event.target.value)}
             />
         );
     case 'boolean':