1.15.0-4 breaks boolean reflected properties behavior

[jpzwarte]

@Prop({ reflect: true }) hideLabel: boolean;

In 1.14.0 the following code results an a host element with no attribute when !hideLabel and hide-label when !!hideLabel. My CSS is written accordingly: :host([hide-label]) { ... }.

In 1.15.0-4 the following code results in a host element that always has a hide-label attribute, but without any value when !!hideLabel and hide-label="false" when !hideLabel.

I assume this is some sort of regression?

[jpzwarte]

I can trace it to this commit + line: https://github.com/ionic-team/stencil/commit/0d72aeea51cb754615fed74020b035b1853ad740#diff-819778c11515eb2f58b160e2d1cbf9d0R126 cc @manucorporat

At the moment it does if (newValue !== false || elm.getAttribute(memberName) === '') {, in the DOM, i can see hide-label="false" (memberName === 'hide-label'). So the if statement is false, and the attribute is not removed.

[jerrod]

👍 This issue is blocking us from updating - have you found any reasonable workarounds @jpzwarte

[jpzwarte]

@jerrod Nope, I started setting the attribute myself (and removed reflect: true from @Prop):

<Host
        disabled={this.disabled ? true : null}
        has-anchor={this.hasAnchor ? true : null}
        has-icon={this.hasIcon ? true : null}
        tabindex={this.disabled ? -1 : this.tabOrder}
      >

There seems little interest in restoring the behavior from 1.14.0 cc @adamdbradley

[bjolletz]

I've run into this issue as well. It's certainly not consistent that myBooleanProp="true" reflects to myBooleanProp while myBooleanProp="false" reflects to myBooleanProp="false". And as the OP says, this breaks CSS attribute styling like :host([myBooleanProp]).

[tanner-reits]

Hey all! Sorry this issue has sat so long.

If anyone here is still experiencing this problem, please update the issue with a minimum reproduction repo (this helps the team verify issues and gives us something to reference when we go to resolve the problem). Otherwise, we'll look to close this out in the near future. Sorry again for the delay!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!