bug: button, binding undefined to fill causes stencil to set value to null

[indraraj26]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

It is not possible to write conditional fill on ion-button with undefined.

on first load

click on any tab

Expected Behavior

It should have the same first load button color as we are assigning undefined;

Or

Introduce new value called fill='none'

Steps to Reproduce

repo: https://github.com/indraraj26/storage-boolean-issue/tree/ion-button-fill

1. git clone https://github.com/indraraj26/storage-boolean-issue/tree/ion-button-fill
2. ionic serve
3. see the first tab
4. click on any tabs

Code Reproduction URL

https://github.com/indraraj26/storage-boolean-issue/tree/ion-button-fill

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (C:\Users\user\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.3
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.0
@capacitor/android : 3.6.0
@capacitor/core : 3.6.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

No response

[indraraj26]

But above behavior should be consistent with the load.

This can be fixed with

 [fill]="item.id !== selectedTab ? 'outline': 'solid'"

[liamdebeasi]

Thanks for the report. When clicking a button, fill is correctly set to undefined but Stencil then sets the property to null. More investigation is needed as to why this is happening.

edit: Bug logged: stenciljs/core#3586

[liamdebeasi]

Thanks for the issue. This has been resolved via #26339, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.