fix(input): render placeholder for multiline text inputs

narmi · May 6, 2024 · 534e45e · 534e45e
1 parent a348406
commit 534e45e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/TextInput/index.js b/src/TextInput/index.js
@@ -4,7 +4,7 @@ import Input from "../Input";
 import iconSelection from "src/icons/selection.json";
 
 export const VALID_ICON_NAMES = iconSelection.icons.map(
-  (icon) => icon.properties.name
+  (icon) => icon.properties.name,
 );
 
 /**
@@ -30,7 +30,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
   } = props;
 
   const [inputValue, setInputValue] = useState(
-    defaultValue ? defaultValue : ""
+    defaultValue ? defaultValue : "",
   );
 
   function _onBlur(e) {
@@ -86,6 +86,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
             onChange={_onChange}
             onBlur={_onBlur}
             required
+            placeholder={props.label}
             aria-label={props.label}
             data-testid={testId}
             {...nativeElementProps}

diff --git a/src/TextInput/index.stories.js b/src/TextInput/index.stories.js
@@ -62,7 +62,12 @@ export const Example = () => {
 };
 
 export const MultiLine = () => {
-  return <TextInput multiline />;
+  return (
+    <>
+      <TextInput multiline />
+      <TextInput multiline label="Multiline with label" />
+    </>
+  );
 };
 
 export const WithIcon = Template.bind({});

diff --git a/src/TextInput/index.test.jsx b/src/TextInput/index.test.jsx
@@ -5,7 +5,7 @@ import TextInput from "./";
 describe("TextInput", () => {
   it("Basic Test to verify TextInput behaves as an Html input", () => {
     render(
-      <TextInput data-testid={1} label={"Label"} defaultValue={"Default"} />
+      <TextInput data-testid={1} label={"Label"} defaultValue={"Default"} />,
     );
     const basicInput = screen.getByTestId(1);
     expect(basicInput.value).toEqual("Default");
@@ -20,7 +20,7 @@ describe("TextInput", () => {
         id="test"
         label={"Test Quotes"}
         formatter={(text) => text.replace("“", '"').replace("”", '"')}
-      />
+      />,
     );
     const smartQuoteInput = screen.getByLabelText("Test Quotes");
 
@@ -43,4 +43,10 @@ describe("TextInput", () => {
 
     expect(basicInput.value).toBe("“this is a test”");
   });
+
+  it("multiline with label sets placeholder attribute", () => {
+    render(<TextInput label={"Label"} multiline />);
+    const multilineInput = screen.getByPlaceholderText("Label");
+    expect(multilineInput).toBeInTheDocument();
+  });
 });