Add ignorePlaceholder

Author: 12joan

.changeset/breezy-dodos-lick.md

@@ -0,0 +1,5 @@
+---
+'react-textarea-autosize': minor
+---
+
+Add `ignorePlaceholder` option

README.md

@@ -42,6 +42,7 @@ https://andarist.github.io/react-textarea-autosize/
 | `minRows`           | `number`  | Minimum number of rows to show for textarea                                                                                                                                                                                                        |
 | `onHeightChange`    | `func`    | Function invoked on textarea height change, with height as first argument. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include `{ rowHeight: number }`. |
 | `cacheMeasurements` | `boolean` | Reuse previously computed measurements when computing height of textarea. Default: `false`                                                                                                                                                         |
+| `ignorePlaceholder` | `boolean` | Whether to ignore placeholder when computing height of textarea. Default: `false`                                                                                                                                                                  |
 
 Apart from these, the component accepts all props that are accepted by `<textarea/>`, like `style`, `onChange`, `value`, etc.
 

example/index.tsx

@@ -100,6 +100,42 @@ const SetRows = () => {
   );
 };
 
+const WithPlaceholder = () => {
+  return (
+    <div>
+      <h2>{'Component with placeholder'}</h2>
+      <pre>
+        {`
+  <TextareaAutosize
+    placeholder="The quick brown fox jumps over the lazy dog..."
+    />
+`}
+      </pre>
+      <TextareaAutosize placeholder="The quick brown fox jumps over the lazy dog..." />
+    </div>
+  );
+};
+
+const WithIgnoredPlaceholder = () => {
+  return (
+    <div>
+      <h2>{'Component with ignored placeholder'}</h2>
+      <pre>
+        {`
+  <TextareaAutosize
+    placeholder="The quick brown fox jumps over the lazy dog..."
+    ignorePlaceholder
+    />
+`}
+      </pre>
+      <TextareaAutosize
+        placeholder="The quick brown fox jumps over the lazy dog..."
+        ignorePlaceholder
+      />
+    </div>
+  );
+};
+
 const ControlledMode = () => {
   const [value, setValue] = React.useState(new Array(15).join('\nLine.'));
   return (
@@ -210,6 +246,8 @@ const Demo = () => {
       <MinMaxRowsBorderBox />
       <MaxRows />
       <SetRows />
+      <WithPlaceholder />
+      <WithIgnoredPlaceholder />
       <ControlledMode />
       <UncontrolledMode />
       <OnHeightChangeCallback />

src/index.tsx

@@ -25,6 +25,7 @@ export interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {
   minRows?: number;
   onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
   cacheMeasurements?: boolean;
+  ignorePlaceholder?: boolean;
   style?: Style;
 }
 
@@ -33,7 +34,8 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
   TextareaAutosizeProps
 > = (
   {
-    cacheMeasurements,
+    cacheMeasurements = false,
+    ignorePlaceholder = false,
     maxRows,
     minRows,
     onChange = noop,
@@ -75,7 +77,7 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
 
     const [height, rowHeight] = calculateNodeHeight(
       nodeSizingData,
-      node.value || node.placeholder || 'x',
+      node.value || (!ignorePlaceholder && node.placeholder) || 'x',
       minRows,
       maxRows,
     );