bug: validator: green border on firefox when button is within input label

[condemil]

Reproduction URL (Required)

https://play.tailwindcss.com/0g01zOPpVo

What version of daisyUI are you using?

latest

Which browsers are you seeing the problem on?

This issue happens only on Firefox, but not on WebKit-based browsers.
I checked with Firefox Developer Edition 140.0b4 (aarch64).

Describe your issue

Reproducible in playground with the following code:

<label class="input validator">
  <input name="test" type="text">
  <button></button>
</label>

[github-actions]

Thank you @condemil 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.

[pdanpdan]

That is not really a valid html construct.
You have 2 form elements that the label can consider as target, and I suppose chrome/safari chooses the first one and Firefox the second one.
If you add a for="name" on the label it should solve the problem.

[saadeghi]

@condemil @pdanpdan is right. There must be one input in a <lable> tag. You can use a div if you want more inputs:

<div class="input validator">
  <input name="test" type="text">
  <button>button</button>
</div>

Also, since there's no text label for the <input>, consider adding a aria-label="my input" to <input> tag to make sure it's accessible for screen readers.