saadeghi/daisyui

bug: always disabled button when disabled attribute is present

nandi95 opened this issue · 2 comments

nandi95 commented

What version of daisyUI are you using?

v4.10.3

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://play.tailwindcss.com/U7A0haQXUu

Describe your issue

https://github.com/saadeghi/daisyui/blob/master/src/components/styled/button.css#L326

In vue js and probably other frameworks I can do :disabled="myVar" this means sometimes it's disabled="true" sometimes it's disabled="false". (vue removes the disabled attribute from the if it's binded on the button but my usecase is an anchor tag in which case vue doesn't remove the attribute only sets it to false). However daisy only check if the attribute is present, see above link to code.

My workaround is I apply the disabled classes when it should be disabled: :class="{ 'btn-disabled pointer-events-none': pending }"

github-actions commented

Thank you @nandi95 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented

disabled is not a valid attribute for <a>. So what you're trying to do, is not valid HTML.
Ideally you should conditionally render a <a> tag only if it should be a link.

Also, in Vue, to conditionally add the disabled attribute, you can use :disabled="null" (not :disabled="false")