From 98c5b563105b2d77d4f218dfe050797432d5b6f6 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 28 Nov 2024 09:19:48 +0100
Subject: [PATCH] Fix errors

---
 src/panelWebView/components/Fields/TextField.tsx | 13 ++++++++++---
 src/panelWebView/components/SeoKeywords.tsx      |  4 +---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/panelWebView/components/Fields/TextField.tsx b/src/panelWebView/components/Fields/TextField.tsx
index 5aa4612b..b0d06bfe 100644
--- a/src/panelWebView/components/Fields/TextField.tsx
+++ b/src/panelWebView/components/Fields/TextField.tsx
@@ -78,13 +78,10 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({
 
   const border = useMemo(() => {
     if (showRequiredState) {
-      updateRequired(false);
       return '1px solid var(--vscode-inputValidation-errorBorder)';
     } else if (!isValid) {
-      updateRequired(true);
       return '1px solid var(--vscode-inputValidation-warningBorder)';
     } else {
-      updateRequired(true);
       return '1px solid var(--vscode-inputValidation-infoBorder)';
     }
   }, [showRequiredState, isValid]);
@@ -162,6 +159,16 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({
     );
   }, [settings?.aiEnabled, settings?.copilotEnabled, settings?.seo, name, actions, loading]);
 
+  useEffect(() => {
+    if (showRequiredState) {
+      updateRequired(false);
+    } else if (!isValid) {
+      updateRequired(true);
+    } else {
+      updateRequired(true);
+    }
+  }, [showRequiredState, isValid]);
+
   useEffect(() => {
     if (text !== value && (lastUpdated === null || Date.now() - DEBOUNCE_TIME > lastUpdated)) {
       setText(value || null);
diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx
index cb48fc98..15fb3ad7 100644
--- a/src/panelWebView/components/SeoKeywords.tsx
+++ b/src/panelWebView/components/SeoKeywords.tsx
@@ -85,9 +85,7 @@ const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({
         <VSCodeTableBody>
           {validKeywords.map((keyword, index) => {
             return (
-              <ErrorBoundary key={`${keyword}-${index}`} fallback={<div />}>
-                <SeoKeywordInfo keywords={validKeywords} keyword={keyword} {...data} />
-              </ErrorBoundary>
+              <SeoKeywordInfo key={`${keyword}-${index}`} keywords={validKeywords} keyword={keyword} {...data} />
             );
           })}
         </VSCodeTableBody>