Button attribute "hidden" hides the button when set to "false"

[chrstief]

Bug Description

Using the attribute hidden on the button hides it, even when set to false:

Affected Component

ui5-button

Expected Behaviour

When hidden is set to false, the button should not be hidden. It should be visible.

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-g8r2t6

Steps to Reproduce

1. Set hidden={false} on any button

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.13.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[georgimkv]

Hi @chrstief The hidden attribute in HTML is a boolean attribute. It's mere existence in the element's markup implies that the attribute is set on the element. For example, hidden="false", hidden="FaLsE", hidden="hidden" are effectively the same thing. A boolean attribute in this case does not mean that the browser will parse the string you give as value to the attribute and convert it to a Boolean when accessed with JS.

This works the same with the native HTML button element and this library tries to align its behaviour with the native HTML elements behaviour. Please see this sample: https://codesandbox.io/s/ui5-webcomponents-forked-q4sgp4?file=/index.html

[chrstief]

@gmkv Sorry I meant to open this issue in the ui5-webcomponents-react repository. You are correct that when you enter the string "false" to the hidden Attribute it evalutates to true. I think this is the exact mistake that is happening in the React repository. I opened the issue there with the appropriate codeSandbox example: https://codesandbox.io/p/sandbox/inspiring-pike-rdcyy8?file=%2Fsrc%2FApp.tsx%3A15%2C52 https://github.com/SAP/ui5-webcomponents-react/issues/4937

[georgimkv]

This is actually a JSX thing/feature: https://legacy.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

[chrstief]

The code example shows that the UI5 button behaves differently from the native button in this case: https://codesandbox.io/p/sandbox/inspiring-pike-rdcyy8?file=%2Fsrc%2FApp.tsx%3A15%2C52

[georgimkv]

Yes. My colleagues in the other project will know better.