Merge branch 'main' into machow-feat-narwhals

* main:
  bug(input_text_area): Auto resized text areas resize on visibility change (posit-dev#1569)
  chore(ci): Skip all chat tests on webkit (posit-dev#1575)

Author: schloerke

CHANGELOG.md

@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Require shinyswatch >= 0.7.0 and updated examples accordingly. (#1558)
 
+* `input_text_area(autoresize=True)` now resizes properly even when it's not visible when initially rendered (e.g. in a closed accordion or a hidden tab). (#1560)
+
 ### Bug fixes
 
 ### Deprecations

js/text-area/textarea-autoresize.ts

@@ -18,10 +18,46 @@ function onDelegatedEvent(
   });
 }
 
+// Use a single intersectionObserver as they are slow to create / use.
+let textAreaIntersectionObserver: null | IntersectionObserver = null;
+
+function callUpdateHeightWhenTargetIsVisible(target: HTMLTextAreaElement) {
+  if (textAreaIntersectionObserver === null) {
+    // Create a single observer to watch for the textarea becoming visible
+    textAreaIntersectionObserver = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          // Quit if the entry is not visible
+          if (!entry.isIntersecting) {
+            return;
+          }
+          // If the entry is visible (even if it's just a single pixel)
+          // Stop observing the target
+          textAreaIntersectionObserver!.unobserve(entry.target);
+
+          // Update the height of the textarea
+          update_height(entry.target as HTMLTextAreaElement);
+        });
+      }
+    );
+  }
+
+  textAreaIntersectionObserver.observe(target);
+}
+
 function update_height(target: HTMLTextAreaElement) {
-  // Automatically resize the textarea to fit its content.
-  target.style.height = "auto";
-  target.style.height = target.scrollHeight + "px";
+  if (target.scrollHeight > 0) {
+    // Automatically resize the textarea to fit its content.
+    target.style.height = "auto";
+    target.style.height = target.scrollHeight + "px";
+  } else {
+    // The textarea is not visible on the page, therefore it has a 0 scroll height.
+
+    // If we should autoresize the text area height, then we can wait for the textarea to
+    // become visible and call `update_height` again. Hopefully the scroll height is no
+    // longer 0
+    callUpdateHeightWhenTargetIsVisible(target);
+  }
 }
 
 // Update on change

shiny/www/py-shiny/text-area/textarea-autoresize.js

@@ -7,9 +7,30 @@ function onDelegatedEvent(eventName, selector, callback) {
     }
   });
 }
+var textAreaIntersectionObserver = null;
+function callUpdateHeightWhenTargetIsVisible(target) {
+  if (textAreaIntersectionObserver === null) {
+    textAreaIntersectionObserver = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+          textAreaIntersectionObserver.unobserve(entry.target);
+          update_height(entry.target);
+        });
+      }
+    );
+  }
+  textAreaIntersectionObserver.observe(target);
+}
 function update_height(target) {
-  target.style.height = "auto";
-  target.style.height = target.scrollHeight + "px";
+  if (target.scrollHeight > 0) {
+    target.style.height = "auto";
+    target.style.height = target.scrollHeight + "px";
+  } else {
+    callUpdateHeightWhenTargetIsVisible(target);
+  }
 }
 onDelegatedEvent(
   "input",

tests/playwright/shiny/components/chat/append_user_msg/test_chat_append_user_msg.py

@@ -1,9 +1,11 @@
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat_append_user_message(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/components/chat/basic/test_chat_basic.py

@@ -1,9 +1,11 @@
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat_basic(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/components/chat/errors/test_chat_errors.py

@@ -1,9 +1,11 @@
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat_basic_error(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/components/chat/stream/test_chat_stream.py

@@ -1,11 +1,13 @@
 import re
 
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/components/chat/transform/test_chat_transform.py

@@ -1,9 +1,11 @@
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat_transform(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/components/chat/transform_assistant/test_chat_transform_assistant.py

@@ -1,10 +1,12 @@
 from playwright.sync_api import Page, expect
+from utils.deploy_utils import skip_on_webkit
 
 from shiny import ui
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
+@skip_on_webkit
 def test_validate_chat_transform_assistant(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 

tests/playwright/shiny/inputs/input_text_area/autoresize/app.py

@@ -0,0 +1,26 @@
+from shiny.express import render, ui
+
+with ui.navset_card_tab(id="tab"):
+
+    with ui.nav_panel("Tab 1"):
+        "Tab 1 content"
+    with ui.nav_panel("Text Area"):
+        ui.input_text_area(
+            id="test_text_area",
+            label="A text area input",
+            autoresize=True,
+            value="a\nb\nc\nd\ne",
+        )
+
+        ui.input_text_area(
+            id="test_text_area2",
+            label="A second text area input",
+            autoresize=True,
+            value="a\nb\nc\nd\ne",
+            rows=4,
+        )
+
+
+@render.code
+def text():
+    return "Loaded"