Skip to content

bug: Watch decorator fires too early after #6381, causing runtime errors in components like Ionic #6388

@exorex

Description

@exorex

Prerequisites

Stencil Version

4.37.0

Current Behavior

@Watch decorators fire immediately on initial prop assignment, even before the component has rendered or refs are available.

This causes watchers to run during construction/init phase, when ref elements (this.el, this.overlayEl, etc.) are still undefined.

Any watcher that calls methods relying on DOM refs (e.g. present(), dismiss()) will throw runtime errors.

Expected Behavior

Expected Behavior

@Watch should only fire after the component has loaded and when a prop actually changes.

This was the previous behavior: watchers did not run during initialization, so DOM refs and lifecycle guarantees were respected.

Components should be able to safely assume that when a watcher runs, refs are available and the component is in a usable state.

System Info

#

Steps to Reproduce

Code Reproduction URL

Additional Information

No response

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