bug: always disabled button when disabled attribute is present
nandi95 opened this issue · 2 comments
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 }"
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.
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"
)