From 80acd751d69c6153cd335fe498025fd9c01df594 Mon Sep 17 00:00:00 2001
From: Hugh Nguyen <hugh.nguyen@shopify.com>
Date: Wed, 25 Oct 2023 22:38:20 +0000
Subject: [PATCH] Fixed issue with events not bubbling up if multiline prop is
 true and element is textarea

---
 .changeset/young-yaks-type.md                 |  5 +++++
 .../src/components/TextField/TextField.tsx    | 20 ++++++++++-------
 .../TextField/tests/TextField.test.tsx        | 22 +++++++++++++++++++
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/young-yaks-type.md

diff --git a/.changeset/young-yaks-type.md b/.changeset/young-yaks-type.md
new file mode 100644
index 00000000000..7161751ccdc
--- /dev/null
+++ b/.changeset/young-yaks-type.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed `TextField` events not bubbling up when `multiline`
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 20a9aa5444e..d3aa645f42c 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -261,11 +261,15 @@ export function TextField({
   const buttonPressTimer = useRef<number>();
   const spinnerRef = useRef<HTMLDivElement>(null);
 
+  const getInputRef = useCallback(() => {
+    return multiline ? textAreaRef.current : inputRef.current;
+  }, [multiline]);
+
   useEffect(() => {
-    const input = multiline ? textAreaRef.current : inputRef.current;
+    const input = getInputRef();
     if (!input || focused === undefined) return;
     focused ? input.focus() : input.blur();
-  }, [focused, verticalContent, multiline]);
+  }, [focused, verticalContent, getInputRef]);
 
   useEffect(() => {
     const input = inputRef.current;
@@ -506,7 +510,7 @@ export function TextField({
     setFocus(true);
 
     if (selectTextOnFocus && !suggestion) {
-      const input = multiline ? textAreaRef.current : inputRef.current;
+      const input = getInputRef();
       input?.select();
     }
 
@@ -649,7 +653,7 @@ export function TextField({
       return;
     }
 
-    inputRef.current?.focus();
+    getInputRef()?.focus();
   }
 
   function handleClickChild(event: React.MouseEvent) {
@@ -667,7 +671,7 @@ export function TextField({
     }
 
     setFocus(true);
-    inputRef.current?.focus();
+    getInputRef()?.focus();
   }
 
   function handleClearButtonPress() {
@@ -752,11 +756,11 @@ export function TextField({
   }
 
   function isInput(target: HTMLElement | EventTarget) {
+    const input = getInputRef();
     return (
       target instanceof HTMLElement &&
-      inputRef.current &&
-      (inputRef.current.contains(target) ||
-        inputRef.current.contains(document.activeElement))
+      input &&
+      (input.contains(target) || input.contains(document.activeElement))
     );
   }
 
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index 7f137dac812..37dbfdd6f00 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -115,6 +115,28 @@ describe('<TextField />', () => {
       expect(onClick).toHaveBeenCalled();
     });
 
+    it('bubbles up to the parent element when it occurs in the textarea', () => {
+      const onClick = jest.fn();
+      const event = new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+      });
+      const textField = mountWithApp(
+        <div onClick={onClick}>
+          <TextField
+            type="text"
+            label="TextField"
+            autoComplete="off"
+            multiline
+          />
+        </div>,
+      );
+
+      textField.find('textarea')!.domNode?.dispatchEvent(event);
+      expect(onClick).toHaveBeenCalled();
+    });
+
     it('bubbles up to the parent element when it occurs in the spinner', () => {
       const onClick = jest.fn();
       const event = new MouseEvent('click', {