AppBridge interfering with text area input

App Bridge
1

I have a plain <textarea> element in my app, that is server-rendered with some content.

Today, when I try to delete content from this area, it doesn’t work. The content just stays there.

I noticed there’s an event handler from AppBrigde listening on beforeinput (attached). It’s preventing the content from being changed. I don’t know when this started. It could be today.

Why is AppBridge appending handlers to inputs in the app’s frame context, and can this be removed? I think it’s a bug. We haven’t attached any event handlers nor prepared this textarea in any way with JavaScript - it has no classes nor special attributes.

Screenshot 2025-04-29 at 3.35.07 PM
Screenshot 2025-04-29 at 3.35.07 PM1162×1234 97.8 KB

2

@Liam-Shopify, are you able to ask the AppBridge team to look into it? The problem continues today. We can’t edit the contents of regular text areas, as AppBridge keeps re-setting the value on before input.

3

Hi Flabio, I am sorry to hear that your having problems with AppBridge. I am unable to replicate your problem on my end. Could you provide the html code including the which is having this issue?

4

Hi Alfonso, the code is simply <textarea>Hello</textarea>.

Are you using a React app by any chance? We don’t use React so this is a regular html response in the page.

5

I made a basic HTML page with just this function (un-obfuscated) from AppBridge, to test (see below).

The problem should manifest at the point when the defaultValue of the textarea is set to its own value, during the beforeinput. However, in my separate test, it works fine. It looks like the browser detects it’s the same string and does the right thing.

However, if the value is somehow different from the defaultValue, I can reproduce the issue I’m seeing (except I don’t get that extra space).

I think AppBridge is doing something with textarea values at some point, that when it gets to that event handler, it causes the issue to manifest. This is probably a very subtle bug.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
  <textarea id="hello">Hello world</textarea>

  <script id="hello" type="text/javascript">
   const textarea = document.getElementById("hello");

  function something(input) {
    const element = "target" in input ? input.target : input;

    if (!element) return;

    if (!element._alreadyCaptured) {
        // if ("values" in element) {
        //   element._initialValues = element.values;
        // }

      if ("value" in element) {
        if ("defaultValue" in element) {
            element.defaultValue = element.value + " "; // <-- I APPENDED THIS STRING TO FORCE THE ISSUE TO APPEAR.
          }
          // element._initialValue = element.value;
        }

        // if ("checked" in element) {
        //   element._initialChecked = element.checked;
        // }

        // element._alreadyCaptured = true; <-- FOR SOME REASON MAY NOT BE WORKING SO I TURNED IT OFF
      }
    }

    textarea.addEventListener('beforeinput', something);
  </script>
</body>
</html>