Skip to content

Unexpected Stencil warning: "The state/prop "step" changed during rendering" #2814

@eriklharper

Description

@eriklharper

Stencil version:

 @stencil/core@2.4.0

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Console warning below appears with the code in the example repo.

image

Expected behavior:

No console warning should appear because number is a valid type to supply to the component's step property.

Steps to reproduce:

  1. Clone, npm i && npm start this code to see the error:

Related code:
https://github.com/eriklharper/stencil-prop-changed-during-rendering

import { Component, Host, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-input',
  shadow: true,
})
export class MyInput {
  @Prop({ reflect: true }) step?: number | "any";
  render() {
    return (
      <Host>
        <input step={this.step}></input>
      </Host>
    );
  }
}

This seems to be related to the number | "any" typing for this property. "any" is a valid value for html input's step attribute. If you remove the | "any" from the type, the error goes away.

Other information:

Here is the original Slack thread I created to ask for help on this problem: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1612383253310800

Metadata

Metadata

Assignees

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