fix(form): fix tab field content not updating

The content of tab fields was not being updated properly (e.g. when checking a checkbox it was still being displayed as unchecked unless you switched back and forth between tabs. This solves that issue.
cern-sis · Dec 6, 2024 · 9cc21c4 · 9cc21c4
1 parent f8291c9
commit 9cc21c4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/formule-demo/cypress/e2e/builder.cy.ts b/formule-demo/cypress/e2e/builder.cy.ts
@@ -630,7 +630,7 @@ describe("test basic functionality", () => {
     cy.addFieldWithName("tabView", "mytab");
     cy.getByDataCy("treeItem").contains("mytab").as("tabField");
     cy.addFieldWithName("text", "myfield1", "@tabField");
-    cy.addFieldWithName("text", "myfield2", "@tabField");
+    cy.addFieldWithName("checkbox", "myfield2", "@tabField");
 
     cy.getByDataCy("formPreview")
       .find(".ant-menu-item")
@@ -639,13 +639,18 @@ describe("test basic functionality", () => {
     cy.getByDataCy("formPreview")
       .find(`input#root${SEP}mytab${SEP}myfield1`)
       .should("exist");
+    // Verify that the content refreshes properly
     cy.getByDataCy("formPreview")
       .find(".ant-menu-item")
       .contains("myfield2")
       .click();
     cy.getByDataCy("formPreview")
       .find(`input#root${SEP}mytab${SEP}myfield2`)
+      .as("checkboxWidget")
       .should("exist");
+    cy.get("@checkboxWidget").should("not.be.checked");
+    cy.get("@checkboxWidget").click();
+    cy.get("@checkboxWidget").should("be.checked");
   });
 
   it("tests code editor field", () => {

diff --git a/src/forms/templates/Tabs/TabField.jsx b/src/forms/templates/Tabs/TabField.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   Col,
@@ -18,6 +18,8 @@ const TabField = ({ uiSchema, properties, idSchema }) => {
   const { useBreakpoint } = Grid;
   const screens = useBreakpoint();
   const customizationContext = useContext(CustomizationContext);
+  const [anchor, setAnchor] = useState("");
+  const [scroll, setScroll] = useState(false);
 
   let options = uiSchema["ui:options"] || {};
 
@@ -38,9 +40,18 @@ const TabField = ({ uiSchema, properties, idSchema }) => {
       ? analysis_mode[0].content.props.formData == "true"
       : false,
   );
-  const [anchor, setAnchor] = useState("");
-  const [activeTabContent, setActiveTabContent] = useState([]);
-  const [scroll, setScroll] = useState(false);
+
+  const activeTabContent = useMemo(() => {
+    let activeTab = tabs.filter((prop) => prop.name == active);
+    if (options.tabs) {
+      return properties.filter(
+        (prop) =>
+          activeTab[0].content && activeTab[0].content.indexOf(prop.name) > -1,
+      );
+    } else {
+      return activeTab;
+    }
+  }, [active, options.tabs, properties, tabs]);
 
   const updateActive = (newActiveTab) => {
     setActive(newActiveTab);
@@ -61,22 +72,6 @@ const TabField = ({ uiSchema, properties, idSchema }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    let activeTab = tabs.filter((prop) => prop.name == active);
-    if (options.tabs) {
-      setActiveTabContent(
-        properties.filter(
-          (prop) =>
-            activeTab[0].content &&
-            activeTab[0].content.indexOf(prop.name) > -1,
-        ),
-      );
-    } else {
-      setActiveTabContent(activeTab);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active]);
-
   useEffect(() => {
     if (anchor) {
       const items = anchor.split(customizationContext.separator);