Merge pull request #3012 from BluePandaCard/1785-changing-text-field-…

…hidden-input-has-no-effect 1785 changing text field hidden input has no effect
mi6 · Jan 15, 2025 · 6c4ea23 · 6c4ea23
2 parents b95e6d1 + 28538e7
commit 6c4ea23
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx b/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx
@@ -41,6 +41,7 @@ import {
   Controlled,
   Uncontrolled,
   TextFieldWithMaxLengthMessage,
+  HiddenInput,
 } from "./IcTextFieldTestData";
 import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
 
@@ -342,6 +343,18 @@ describe("IcTextField end-to-end tests", () => {
 
     input.should(HAVE_ATTR, "title", "new-input-title");
   });
+
+  it("should remove the hidden input when hiddenInput prop is toggled", () => {
+    mount(<HiddenInput />);
+
+    cy.get(IC_TEXTFIELD).invoke("prop", "hiddenInput", true);
+
+    cy.get(IC_TEXTFIELD).find('input[type="hidden"]').should("exist");
+
+    cy.get(IC_TEXTFIELD).invoke("prop", "hiddenInput", false);
+
+    cy.get(IC_TEXTFIELD).find('input[type="hidden"]').should("not.exist");
+  });
 });
 
 describe("IcTextField visual regression tests", () => {

diff --git a/packages/react/src/component-tests/IcTextField/IcTextFieldTestData.tsx b/packages/react/src/component-tests/IcTextField/IcTextFieldTestData.tsx
@@ -343,3 +343,9 @@ export const CustomSizeTextField = (): ReactElement => (
     ></IcTextField>
   </div>
 );
+
+export const HiddenInput = (): ReactElement => (
+  <div style={style}>
+    <IcTextField label="my label" />
+  </div>
+);
diff --git a/packages/react/src/stories/ic-text-field.stories.mdx b/packages/react/src/stories/ic-text-field.stories.mdx
@@ -6,7 +6,7 @@ import {
   ArgsTable,
   Description,
 } from "@storybook/addon-docs";
-import { IcTextField } from "../components";
+import { IcTextField, IcButton } from "../components";
 import {SlottedSVG} from "../react-component-lib/slottedSVG";
 import readme from "../../../web-components/src/components/ic-text-field/readme.md";
 
@@ -561,6 +561,27 @@ export const Uncontrolled = () => {
   </Story>
 </Canvas>
 
+### Hidden input
+
+export const HiddenInput = () => {
+  const [renderHidden, setRenderHidden] = useState(true);
+  const handleChange = () => {
+    setRenderHidden(!renderHidden);
+  };
+  return (
+    <>
+      <IcTextField label="my label" hiddenInput={renderHidden} />
+      <IcButton onClick={() => handleChange()}>Toggle hidden input</IcButton>
+    </>
+  );
+};
+
+<Canvas>
+  <Story name="Hidden input">
+    <HiddenInput />
+  </Story>
+</Canvas>
+
 ### Playground
 
 export const defaultArgs = {

diff --git a/packages/web-components/src/components/ic-text-field/ic-text-field.tsx b/packages/web-components/src/components/ic-text-field/ic-text-field.tsx
@@ -32,6 +32,7 @@ import {
   isSlotUsed,
   removeDisabledFalse,
   checkSlotInChildMutations,
+  removeHiddenInput,
 } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import {
@@ -575,9 +576,10 @@ export class TextField {
 
     const invalid = `${currentStatus === IcInformationStatus.Error}`;
 
-    if (hiddenInput) {
-      renderHiddenInput(true, this.el, name, value, disabledMode);
-    }
+    hiddenInput
+      ? renderHiddenInput(true, this.el, name, value, disabledMode)
+      : removeHiddenInput(this.el);
+
     return (
       <Host class={{ ["fullwidth"]: fullWidth }}>
         <ic-input-container readonly={readonly} disabled={disabledMode}>