-
-
Notifications
You must be signed in to change notification settings - Fork 834
Unexpected Stencil warning: "The state/prop "step" changed during rendering" #2814
Description
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.
Expected behavior:
No console warning should appear because number is a valid type to supply to the component's step property.
Steps to reproduce:
- Clone,
npm i && npm startthis 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
