Skip to content

Minified Preact code causing Error by storing event handlers in l property on elements causing a name conflict #4461

@paulborm

Description

@paulborm

Describe the bug
Preact stores references to an element's event handlers inside a _listeners property on the element itself — this gets compiled to just l causing a conflict in case a form element with the same name exists inside a form — leading to this error:

Uncaught
TypeError: t is not a function
    at HTMLFormElement.<anonymous>

To Reproduce

  • Create a HTMLFormElement containing one or several HTMLInputElement
  • Attach a submit handler to the form (the event handler can contain a simple console.log)
  • Give each of the input elements a name and make sure to name one l e.g. <input name="l">
  • Use a Chromium browser
  • Use the compiled and minified version of Preact

Here's a StackBlitz link where you can test it out.

Expected behavior
When submitting the form, the event handler should be invoked resulting in a log statement in the browser dev tools.

Actual behavior
An error is thrown.

Possible Solution
Consider using a Symbol for the property key storing event handlers on elements.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions