feat: Add input_submit_textarea() and update_submit_textarea() (#2099)

Author: cpsievert

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED]
 
+### New features
+
+* Added a new `input_submit_textarea()` input element, which is similar to `input_text_area()`, but includes a submit button to only submit the text changes to the server on click. This is especially useful when the input text change triggers a long-running operation and/or the user wants to type longer-form input and review it before submitting it. (#2099)
+
 ### Bug fixes
 
 * Fixed `ui.tooltip()`'s `options` parameter to properly pass Bootstrap tooltip options to the underlying web component. (#2101)

docs/_quartodoc-core.yml

@@ -55,6 +55,7 @@ quartodoc:
         - ui.input_numeric
         - ui.input_text
         - ui.input_text_area
+        - ui.input_submit_textarea
         - ui.input_password
         - ui.input_action_button
         - ui.input_action_link
@@ -166,6 +167,7 @@ quartodoc:
         - ui.update_text
         - name: ui.update_text_area
           dynamic: "shiny.ui.update_text"
+        - ui.update_submit_textarea
         - ui.update_navset
         - ui.update_action_button
         - ui.update_action_link

docs/_quartodoc-express.yml

@@ -27,6 +27,7 @@ quartodoc:
         - express.ui.input_numeric
         - express.ui.input_text
         - express.ui.input_text_area
+        - express.ui.input_submit_textarea
         - express.ui.input_password
         - express.ui.input_action_button
         - express.ui.input_action_link
@@ -126,6 +127,7 @@ quartodoc:
         - express.ui.update_numeric
         - express.ui.update_text
         - express.ui.update_text_area
+        - express.ui.update_submit_textarea
         - express.ui.update_navset
         - express.ui.update_action_button
         - express.ui.update_action_link

docs/_quartodoc-testing.yml

@@ -39,6 +39,7 @@ quartodoc:
         - playwright.controller.InputSelectize
         - playwright.controller.InputSlider
         - playwright.controller.InputSliderRange
+        - playwright.controller.InputSubmitTextarea
         - playwright.controller.InputSwitch
         - playwright.controller.InputTaskButton
         - playwright.controller.InputText

shiny/_versions.py

@@ -1,4 +1,4 @@
-shiny_html_deps = "1.11.1.9000"
+shiny_html_deps = "1.11.1.9001"
 bslib = "0.9.0.9000"
 htmltools = "0.5.8.9000"
 bootstrap = "5.3.1"

shiny/api-examples/input_submit_textarea/app-core.py

@@ -0,0 +1,22 @@
+import time
+
+from shiny import App, Inputs, Outputs, Session, render, ui
+
+app_ui = ui.page_fluid(
+    ui.input_submit_textarea("text", placeholder="Enter some input..."),
+    ui.output_text("value"),
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+    @render.text
+    def value():
+        if "text" in input:
+            # Simulate processing time
+            time.sleep(2)
+            return f"You entered: {input.text()}"
+        else:
+            return "Submit some input to see it here."
+
+
+app = App(app_ui, server)

shiny/api-examples/input_submit_textarea/app-express.py

@@ -0,0 +1,15 @@
+import time
+
+from shiny.express import input, render, ui
+
+ui.input_submit_textarea("text", placeholder="Enter some input...")
+
+
+@render.text
+def value():
+    if "text" in input:
+        # Simulate processing time
+        time.sleep(2)
+        return f"You entered: {input.text()}"
+    else:
+        return "Submit some input to see it here."

shiny/api-examples/update_submit_textarea/app-core.py

@@ -0,0 +1,45 @@
+from shiny import App, Inputs, Outputs, Session, reactive, render, ui
+
+app_ui = ui.page_fluid(
+    ui.input_submit_textarea(
+        "comment",
+        label="Your Comment",
+        placeholder="Type your comment here...",
+        rows=2,
+        toolbar=[
+            ui.input_action_button("clear", "Clear", class_="btn-sm btn-danger"),
+            ui.input_action_button("template", "Use Template", class_="btn-sm"),
+        ],
+    ),
+    ui.output_text("submitted_comment"),
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+    @reactive.effect
+    @reactive.event(input.clear)
+    def _():
+        ui.update_submit_textarea(
+            "comment",
+            value="",
+            placeholder="Type your comment here...",
+        )
+
+    @reactive.effect
+    @reactive.event(input.template)
+    def _():
+        ui.update_submit_textarea(
+            "comment",
+            value="Thank you for your feedback. We appreciate your input!",
+            placeholder="",
+            label="Your Comment (Template Applied)",
+        )
+
+    @render.text
+    def submitted_comment():
+        if "comment" in input:
+            return f"Submitted: {input.comment()}"
+        return "No comment submitted yet."
+
+
+app = App(app_ui, server)

shiny/api-examples/update_submit_textarea/app-express.py

@@ -0,0 +1,41 @@
+from shiny import reactive, render
+from shiny.express import input, ui
+
+ui.input_submit_textarea(
+    "comment",
+    label="Your Comment",
+    placeholder="Type your comment here...",
+    rows=2,
+    toolbar=[
+        ui.input_action_button("clear", "Clear", class_="btn-sm btn-danger"),
+        ui.input_action_button("template", "Use Template", class_="btn-sm"),
+    ],
+)
+
+
+@reactive.effect
+@reactive.event(input.clear)
+def _():
+    ui.update_submit_textarea(
+        "comment",
+        value="",
+        placeholder="Type your comment here...",
+    )
+
+
+@reactive.effect
+@reactive.event(input.template)
+def _():
+    ui.update_submit_textarea(
+        "comment",
+        value="Thank you for your feedback. We appreciate your input!",
+        placeholder="",
+        label="Your Comment (Template Applied)",
+    )
+
+
+@render.text
+def submitted_comment():
+    if "comment" in input:
+        return f"Submitted: {input.comment()}"
+    return "No comment submitted yet."

shiny/express/ui/__init__.py

@@ -64,6 +64,7 @@
     input_select,
     input_selectize,
     input_slider,
+    input_submit_textarea,
     input_switch,
     input_task_button,
     input_text,
@@ -102,6 +103,7 @@
     update_selectize,
     update_sidebar,
     update_slider,
+    update_submit_textarea,
     update_switch,
     update_task_button,
     update_text,
@@ -220,6 +222,7 @@
     "input_select",
     "input_selectize",
     "input_slider",
+    "input_submit_textarea",
     "bind_task_button",
     "input_task_button",
     "input_text",
@@ -243,6 +246,7 @@
     "update_select",
     "update_selectize",
     "update_slider",
+    "update_submit_textarea",
     "update_task_button",
     "update_text",
     "update_text_area",