feat(Textarea): add defaultValue prop

kiwicom · Sep 10, 2023 · 0da689f · 0da689f
1 parent 269928c
commit 0da689f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/packages/orbit-components/src/Textarea/README.md b/packages/orbit-components/src/Textarea/README.md
@@ -21,6 +21,7 @@ Table below contains all types of the props available in Textarea component.
 | dataAttrs    | `Object`                   |              | Optional prop for passing `data-*` attributes to the `textarea` DOM element.                                                                                   |
 | dataTest     | `string`                   |              | Optional prop for testing purposes.                                                                                                                            |
 | id           | `string`                   |              | Set `id` for `Textarea`                                                                                                                                        |
+| defaultValue | `string`                   |              | Specifies the default value of the Textarea. To be used with uncontrolled usage.                                                                               |
 | disabled     | `boolean`                  |              | If `true`, the Textarea will be disabled.                                                                                                                      |
 | error        | `React.Node`               |              | The error to display beneath the Textarea. [See Functional specs](#functional-specs)                                                                           |
 | fullHeight   | `boolean`                  | `false`      | If `true`, the Textarea will take 100 % of parent's height.                                                                                                    |
@@ -40,7 +41,7 @@ Table below contains all types of the props available in Textarea component.
 | size         | [`enum`](#enum)            | `"normal"`   | The size of the Textarea.                                                                                                                                      |
 | spaceAfter   | `enum`                     |              | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
 | tabIndex     | `string \| number`         |              | Specifies the tab order of an element                                                                                                                          |
-| value        | `string`                   |              | Specifies the value of the Textarea.                                                                                                                           |
+| value        | `string`                   |              | Specifies the value of the Textarea. To be used with controlled usage.                                                                                         |
 | helpClosable | `boolean`                  | `true`       | Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.                                                 |
 
 ### enum

diff --git a/packages/orbit-components/src/Textarea/__tests__/index.test.tsx b/packages/orbit-components/src/Textarea/__tests__/index.test.tsx
@@ -11,12 +11,10 @@ describe("Textarea", () => {
   it("should have expected DOM output", async () => {
     const name = "name";
     const label = "Label";
-    const value = "value";
     const placeholder = "placeholder";
     const dataTest = "test";
     const maxLength = 200;
     const fullHeight = true;
-    const onChange = jest.fn();
     const spaceAfter = SPACINGS_AFTER.NORMAL;
     const dataAttrs = {
       "data-sample": "Sample",
@@ -26,13 +24,12 @@ describe("Textarea", () => {
       <Textarea
         name={name}
         label={label}
-        value={value}
+        defaultValue="value"
         rows={4}
         fullHeight={fullHeight}
         placeholder={placeholder}
         maxLength={maxLength}
         help={<div>Something useful.</div>}
-        onChange={onChange}
         dataTest={dataTest}
         spaceAfter={spaceAfter}
         dataAttrs={dataAttrs}
@@ -42,7 +39,7 @@ describe("Textarea", () => {
     const textarea = screen.getByRole("textbox");
 
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
-    expect(screen.getByDisplayValue(value)).toBeInTheDocument();
+    expect(screen.getByDisplayValue("value")).toBeInTheDocument();
     expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
 
     await act(() => user.tab());
@@ -54,20 +51,23 @@ describe("Textarea", () => {
     expect(textarea).not.toBeInvalid();
     expect(textarea.parentElement).toHaveStyle({ marginBottom: "12px" });
     expect(textarea).toHaveStyle({ padding: "12px" });
-
-    await act(() => user.type(textarea, "kek"));
-    expect(onChange).toHaveBeenCalled();
   });
 
-  it("should have focus and blur", async () => {
+  it("should trigger event handlers", async () => {
     const onFocus = jest.fn();
     const onBlur = jest.fn();
+    const onChange = jest.fn();
+
+    render(<Textarea onFocus={onFocus} onBlur={onBlur} onChange={onChange} />);
+
+    const textarea = screen.getByRole("textbox");
 
-    render(<Textarea onFocus={onFocus} onBlur={onBlur} />);
     await user.tab();
     expect(onFocus).toHaveBeenCalled();
     await user.tab();
     expect(onBlur).toHaveBeenCalled();
+    await act(() => user.type(textarea, "kek"));
+    expect(onChange).toHaveBeenCalled();
   });
 
   it("should have error", async () => {

diff --git a/packages/orbit-components/src/Textarea/index.js.flow b/packages/orbit-components/src/Textarea/index.js.flow
@@ -19,6 +19,7 @@ export type Props = {|
   +required?: boolean,
   +label?: Translation,
   +value?: string,
+  +defaultValue?: string,
   +fullHeight?: boolean,
   +placeholder?: TranslationString,
   +help?: React.Node,

diff --git a/packages/orbit-components/src/Textarea/index.tsx b/packages/orbit-components/src/Textarea/index.tsx
@@ -133,6 +133,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
     id,
     spaceAfter,
     fullHeight,
+    defaultValue,
     value,
     label,
     name,
@@ -192,6 +193,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         id={inputId}
         name={name}
         value={value}
+        defaultValue={defaultValue}
         size={size}
         fullHeight={fullHeight}
         disabled={disabled}

diff --git a/packages/orbit-components/src/Textarea/types.d.ts b/packages/orbit-components/src/Textarea/types.d.ts
@@ -15,6 +15,7 @@ export interface Props extends Common.Globals, Common.SpaceAfter, Common.DataAtt
   readonly readOnly?: boolean;
   readonly required?: boolean;
   readonly label?: Common.Translation;
+  readonly defaultValue?: string;
   readonly value?: string;
   readonly fullHeight?: boolean;
   readonly placeholder?: Common.Translation;