From cf7eae742aacd8eada0bf80d9ebf3158f840216d Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Tue, 13 Feb 2024 09:30:06 -0800
Subject: [PATCH] Update native_input -> native_textarea because it's more
 flexible

---
 docs/components/input.md                |  2 +-
 mesop/__init__.py                       |  2 +-
 mesop/components/input/e2e/input_app.py |  2 +-
 mesop/components/input/input.ng.html    | 11 ++++---
 mesop/components/input/input.proto      |  2 +-
 mesop/components/input/input.py         | 40 +++++++++++--------------
 6 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/docs/components/input.md b/docs/components/input.md
index 483255701..37377e2a4 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -13,4 +13,4 @@ For longer text inputs, also see [Textarea](./textarea.md)
 ## API
 
 ::: mesop.components.input.input.input
-::: mesop.components.input.input.native_input
+::: mesop.components.input.input.native_textarea
diff --git a/mesop/__init__.py b/mesop/__init__.py
index e832ecb8b..a1e5e9c04 100644
--- a/mesop/__init__.py
+++ b/mesop/__init__.py
@@ -52,7 +52,7 @@
 from mesop.components.icon.icon import icon as icon
 from mesop.components.image.image import image as image
 from mesop.components.input.input import input as input
-from mesop.components.input.input import native_input as native_input
+from mesop.components.input.input import native_textarea as native_textarea
 from mesop.components.input.input import textarea as textarea
 from mesop.components.markdown.markdown import markdown as markdown
 from mesop.components.plot.plot import (
diff --git a/mesop/components/input/e2e/input_app.py b/mesop/components/input/e2e/input_app.py
index 998ceaaf1..f4a8e4d90 100644
--- a/mesop/components/input/e2e/input_app.py
+++ b/mesop/components/input/e2e/input_app.py
@@ -36,7 +36,7 @@ def app():
       ),
     )
   ):
-    me.native_input(
+    me.native_textarea(
       readonly=False,
       style=me.Style(
         height=32,
diff --git a/mesop/components/input/input.ng.html b/mesop/components/input/input.ng.html
index 3e7f6b261..e9d796ed7 100644
--- a/mesop/components/input/input.ng.html
+++ b/mesop/components/input/input.ng.html
@@ -1,13 +1,16 @@
-@if(config().getIsNativeInput()) {
-<input
+@if(config().getIsNativeTextarea()) {
+<textarea
   [disabled]="config().getDisabled()"
   [placeholder]="config().getPlaceholder()!"
-  [type]="config().getType()!"
   [value]="config().getValue()"
   [readonly]="config().getReadonly()"
   [style]="getStyle()"
   (input)="onInput($event)"
-/>
+  [cdkTextareaAutosize]="config().getAutosize()"
+  [cdkAutosizeMinRows]="config().getMinRows()"
+  [cdkAutosizeMaxRows]="config().getMaxRows()"
+  #autosize="cdkTextareaAutosize"
+></textarea>
 } @else {
 <mat-form-field
   [hideRequiredMarker]="config().getHideRequiredMarker()"
diff --git a/mesop/components/input/input.proto b/mesop/components/input/input.proto
index 66d5b1d0f..fcf54d5a9 100644
--- a/mesop/components/input/input.proto
+++ b/mesop/components/input/input.proto
@@ -27,5 +27,5 @@ message InputType {
   optional int32 max_rows = 22;
   // Not exposed as public API.
   optional bool is_textarea = 19;
-  optional bool is_native_input = 23;
+  optional bool is_native_textarea = 23;
 }
diff --git a/mesop/components/input/input.py b/mesop/components/input/input.py
index d54aeb9ad..1d4f6d902 100644
--- a/mesop/components/input/input.py
+++ b/mesop/components/input/input.py
@@ -37,6 +37,9 @@ def textarea(
 
   Args:
     label: Label for input.
+    autosize: If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit.
+    min_rows: The minimum number of rows the textarea will display.
+    max_rows: The maximum number of rows the textarea will display.
     on_input: [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is a native browser event.
     rows: The number of lines to show in the text area.
     appearance: The form field appearance style.
@@ -63,7 +66,7 @@ def textarea(
       min_rows=min_rows,
       max_rows=max_rows,
       is_textarea=True,
-      is_native_input=False,
+      is_native_textarea=False,
       disabled=disabled,
       placeholder=placeholder,
       required=required,
@@ -145,7 +148,7 @@ def input(
     type_name="input",
     proto=input_pb.InputType(
       is_textarea=False,
-      is_native_input=False,
+      is_native_textarea=False,
       disabled=disabled,
       placeholder=placeholder,
       required=required,
@@ -167,25 +170,12 @@ def input(
   )
 
 
-def native_input(
+def native_textarea(
   *,
   on_input: Callable[[InputEvent], Any] | None = None,
-  type: Literal[
-    "color",
-    "date",
-    "datetime-local",
-    "email",
-    "month",
-    "number",
-    "password",
-    "search",
-    "tel",
-    "text",
-    "time",
-    "url",
-    "week",
-  ]
-  | None = None,
+  autosize: bool = False,
+  min_rows: int | None = None,
+  max_rows: int | None = None,
   style: Style | None = None,
   disabled: bool = False,
   placeholder: str = "",
@@ -193,11 +183,13 @@ def native_input(
   readonly: bool = False,
   key: str | None = None,
 ):
-  """Creates a browser native Input component. Intended for advanced use cases with maximum UI control.
+  """Creates a browser native Textarea component. Intended for advanced use cases with maximum UI control.
 
   Args:
     on_input: [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is a native browser event.
-    type: Input type of the element. For textarea, use `me.Textarea(...)`
+    autosize: If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit.
+    min_rows: The minimum number of rows the textarea will display.
+    max_rows: The maximum number of rows the textarea will display.
     style: Style for input.
     disabled: Whether it's disabled.
     placeholder: Placeholder value
@@ -211,10 +203,12 @@ def native_input(
     type_name="input",
     proto=input_pb.InputType(
       is_textarea=False,
-      is_native_input=True,
+      is_native_textarea=True,
+      autosize=autosize,
+      min_rows=min_rows,
+      max_rows=max_rows,
       disabled=disabled,
       placeholder=placeholder,
-      type=type,
       value=value,
       readonly=readonly,
       on_input_handler_id=register_event_handler(on_input, event=InputEvent)