@rachelallyson/hero-hook-form 2.8.0 → 2.9.1

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.9.1] - 2026-01-28
+
+### Fixed
+
+- **Cypress Testing: fillInputByLabel clearing behavior**: Fixed issue where `fillInputByLabel` may not properly clear number inputs with default values
+  - Refactored to use a single chain ensuring clear operation completes before typing
+  - Ensures reliable clearing of all input types, especially number inputs with default values
+  - Clearing is now explicitly documented as the default behavior
+
+## [2.9.0] - 2026-01-22
+
+### Added
+
+- **Documentation: Memory-Safe Forms Guide**: Comprehensive guide for preventing Cypress memory leaks
+  - Complete migration guide from problematic to memory-safe conditional field arrays
+  - Working code examples and best practices
+  - Troubleshooting section for memory issues
+  - Performance optimization recommendations
+
+- **Examples: Question Form Demo**: Working demonstration of memory-safe conditional field arrays
+  - Interactive example showing MULTIPLE_CHOICE question types
+  - Before/after code comparisons
+  - Real-world implementation patterns
+  - Cypress e2e test coverage
+
+- **Enhanced Testing**: Additional test coverage and refinements
+  - Question form e2e tests demonstrating memory safety
+  - Updated Cypress test patterns for memory optimization
+  - Comprehensive validation of conditional field array behavior
+
+### Fixed
+
+- **Test File Naming**: Corrected Cypress test file extensions (`.cy.ts` vs `.spec.ts`)
+- **Conditional Rendering**: Improved formatting and error handling in conditional field components
+
 ## [2.8.0] - 2026-01-22
 
 ### Added

package/dist/cypress/index.js

@@ -334,7 +334,7 @@ var init_utils = __esm({
 });
 
 // src/cypress/helpers.ts
-function fillInputByName(name, value, options = {}) {
+function fillInputByName(name, value, options = { clear: true }) {
   return withRetry(() => {
     waitForFormReady();
     const element = cy.get(`input[name="${name}"], textarea[name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").should("be.visible");
@@ -347,7 +347,7 @@ function fillInputByName(name, value, options = {}) {
     });
   }, DEFAULT_CONFIG);
 }
-function fillInputByType(type, value, index = 0, options = {}) {
+function fillInputByType(type, value, index = 0, options = { clear: true }) {
   const selector = type === "textarea" ? buildHeroUISelector("textarea") : buildHeroUISelector("input", type);
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
   return withRetry(() => {
@@ -357,7 +357,7 @@ function fillInputByType(type, value, index = 0, options = {}) {
     return element.type(value, { force: true });
   }, DEFAULT_CONFIG);
 }
-function fillInputByPlaceholder(placeholder, value, options = {}) {
+function fillInputByPlaceholder(placeholder, value, options = { clear: true }) {
   const selector = `input[placeholder*="${placeholder}"], textarea[placeholder*="${placeholder}"]`;
   return withRetry(() => {
     const element = cy.get(selector);
@@ -367,17 +367,17 @@ function fillInputByPlaceholder(placeholder, value, options = {}) {
     return element.type(value, { force: true });
   }, DEFAULT_CONFIG);
 }
-function fillInputByLabel(label, value, options = {}) {
+function fillInputByLabel(label, value, options = { clear: true }) {
   return withRetry(() => {
-    return cy.contains("label", label).closest("div").find("input, textarea").first().then(($el) => {
-      if (options.clear !== false) {
-        cy.wrap($el).clear({ force: true });
-      }
-      return cy.wrap($el).type(value, { force: true });
-    });
+    const element = cy.contains("label", label).closest("div").find("input, textarea").first();
+    const shouldClear = options.clear !== false;
+    if (shouldClear) {
+      element.clear({ force: true });
+    }
+    return element.type(value, { force: true });
   }, DEFAULT_CONFIG);
 }
-function fillTextareaByName(name, value, options = {}) {
+function fillTextareaByName(name, value, options = { clear: true }) {
   return withRetry(() => {
     const element = cy.get(`textarea[name="${name}"]`);
     if (options.clear !== false) {
@@ -386,7 +386,7 @@ function fillTextareaByName(name, value, options = {}) {
     return element.type(value, { force: true });
   }, DEFAULT_CONFIG);
 }
-function fillTextarea(value, index = 0, options = {}) {
+function fillTextarea(value, index = 0, options = { clear: true }) {
   const selector = HERO_UI_SELECTORS.textarea;
   return withRetry(() => {
     const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();

package/dist/index.js

@@ -400,22 +400,30 @@ function ConditionalField({
   const form = useFormContext();
   const formValues = useWatch({ control });
   const shouldShow = condition(formValues);
-  if (!shouldShow) {
+  const isAlwaysRegisteredFieldArray = field2 && typeof field2 === "object" && "type" in field2 && field2.type === "fieldArray" && "alwaysRegistered" in field2 && field2.alwaysRegistered === true;
+  if (!shouldShow && !isAlwaysRegisteredFieldArray) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement(
-    FormField,
+  return /* @__PURE__ */ React5.createElement(
+    "div",
     {
-      config: field2,
-      form,
-      submissionState: {
-        error: void 0,
-        isSubmitted: false,
-        isSubmitting: false,
-        isSuccess: false
+      className,
+      style: !shouldShow && isAlwaysRegisteredFieldArray ? { display: "none" } : void 0
+    },
+    /* @__PURE__ */ React5.createElement(
+      FormField,
+      {
+        config: field2,
+        form,
+        submissionState: {
+          error: void 0,
+          isSubmitted: false,
+          isSubmitting: false,
+          isSuccess: false
+        }
       }
-    }
-  ));
+    )
+  );
 }
 
 // src/fields/ContentField.tsx
@@ -1363,8 +1371,13 @@ function FormFieldComponent({
       );
     }
   }
+  let shouldRenderConditionalField = true;
   if ("condition" in fieldConfig && fieldConfig.condition && !fieldConfig.condition(watchedValues)) {
-    return null;
+    if ("field" in fieldConfig && fieldConfig.field && typeof fieldConfig.field === "object" && "type" in fieldConfig.field && fieldConfig.field.type === "fieldArray" && "alwaysRegistered" in fieldConfig.field && fieldConfig.field.alwaysRegistered === true) {
+      shouldRenderConditionalField = true;
+    } else {
+      return null;
+    }
   }
   if ("dependsOn" in fieldConfig && fieldConfig.dependsOn) {
     const dependentValue = get(watchedValues, fieldConfig.dependsOn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",