Boolean HTML attributes may not have values "true" or "false"

[ekamphuis82]

Describe the bug
Vue datepicker rendered components (like 'dp__time_input') can have a disabled state.
When this disabled state should be false, the attribute gets the value "false".

According to the HTML specification, values "true" and "false" are not allowed on boolean attributes, to represent a false value, the attribute has to be omitted altogether.

Multiple frameworks (like Quasar) are targeting disabled attributes with !important styling to put them in disabled state, and those frameworks don't take values like "false" into account, because that should not be used anyway.

So when Vue datepicker sets a disabled attribute with value "false", frameworks like Quasar ignore "false" and will override all styling and set the entire element (including child elements) in disabled state.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/stackblitz-starters-yyxlds?file=src%2Fcomponents%2FDatePicker.vue
2. Click on the date picker element
3. You can see the entire component seems to be disabled, also when you lower the value in hours. When you click on the hour, to put it in hour select view, valid hours are also in disabled state (disabled cursor etc.)

Expected behavior
Framework code pointing to [disabled], [disabled] *{} should be taken into consideration, therefore disabled state should not be getting value "false" but disabled attributes must be removed when disabled is false.

Desktop & mobile (please complete the following information):

• Browser Chrome
• Library version 12.0.4

[ekamphuis82]

@Jasenkoo May I suggest a solution:

You can use v-bind with spread syntax.
I.e.
:disabled="someLogicBoolean"
can be replaced with
v-bind="{ ...(someLogicBoolean && { disabled: 'disabled' }) }"

That way, the disabled attribute will only be rendered when it should be rendered (and also have a valid value).

[ekamphuis82]

@Jasenkoo Thank you for the (fast) fix.