Skip to content

Fix: A potential TypeError due to shadowed contains in ElementObserve #842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
songjiz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: A potential TypeError due to shadowed contains in ElementObserve #842

songjiz wants to merge 1 commit into from

Conversation

@songjiz
Copy link

@songjiz songjiz commented May 27, 2025

This PR fixes a potential TypeError: this.element.contains is not a function error in ElementObserver. This error can occur if a child element shadows the native contains method.

To resolve this, the PR replaces this.element.contains(element) with HTMLElement.prototype.contains.call(this.element, element) in the elementIsActive method. This ensures that the native contains method is always called, regardless of any naming conflicts.

For example, consider the following HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module">
      import {
        Application,
        Controller,
      } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
      window.Stimulus = Application.start();

      function debounce(fn, delay = 1000) {
        let timeoutId = null;

        return (...args) => {
          clearTimeout(timeoutId);
          timeoutId = setTimeout(() => fn.apply(this, args), delay);
        };
      }

      Stimulus.register(
        "form",
        class extends Controller {
          initialize() {
            this.submit = debounce(this.submit.bind(this), 300);
          }

          submit() {
            this.element.requestSubmit();
          }
        },
      );
    </script>
  </head>
  <body>
    <form action="/search" method="get" data-controller="form">
      <input type="search" name="contains" data-action="form#submit" />
    </form>
  </body>
</html>

In this case, the <input name="contains"> shadows the native contains method on the <form> element, leading to a TypeError: this.element.contains is not a function error at runtime.

@songjiz songjiz force-pushed the fix-element-observer-contains-type-error branch from dfed9ca to 757bd81 Compare May 27, 2025 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@songjiz