[IxButton] Setting the `disabled` prop to false results in `disabled="false"`

[robert-wettstaedt]

What happened?

When using the IxButton as follows:

<IxButton disabled={false}>Submit</IxButton>

It results in the following HTML:

<ix-button disabled="false" class="sc-ix-button-h sc-ix-button-s hydrated">
  <button type="button" class="btn btn-primary sc-ix-button sc-ix-button-s">
    Submit
  </button>
</ix-button>

Note how the resulting HTML contains disabled="false". This can be a problem for third-party form handlers or css rules since they are only checking if the disabled HTML attribute exists and ignore its value. In fact, the disabled attribute should not be present at all in this case.

---

In contrast, the following code works as expected:

<IxButton disabled={undefined}>Submit</IxButton>

Results in:

<ix-button class="sc-ix-button-h sc-ix-button-s hydrated">
  <button type="button" class="btn btn-primary sc-ix-button sc-ix-button-s">
    Submit
  </button>
</ix-button>

What type of frontend frameware are you seeing the problem on?

React

Which version of iX do you use?

v1.4.2

Code to produce this issue.

https://codesandbox.io/s/setting-the-disabled-prop-to-false-results-in-disabled-false-mwq8jo

[goncalosard]

@danielleroux @nuke-ellington Research has let me to understand that this is a problem from React, Stencil has not adressed this issue. (https://github.com/ionic-team/stencil-ds-output-targets/issues/123)

[danielleroux]

Fixed with version 2.0.0