v2 loading on search group not working

[longrunningprocess]

trafficstars

Please search for duplicate or closed issues first.

Describe the issue

It looks there might be a missing selector for the loading icon (https://github.com/picocss/pico/blob/v2/css/pico.css#L2347) which does not take into account input[type=submit]

Current Behavior

Supplying the following html does not produce a loading indicator:

<form role="search">
   <input type="search" name="query" placeholder="Search" />
   <input type="submit" value="Search" aria-busy="true" />
</form>

Expected Behavior

The loading indicator should appear on the input[type=submit] as it does for buttons.

Reproduction URL

Simply adding the aria-busy="true" to the docs will reveal the bug.

Environment

macOS, Chrome

[lucaslarroche]

@longrunningprocess, I experimented more and I don't understand why it doesn't work. Probably due to the nature of the input[type=submit] element. Let me know if you have any ideas.

[longrunningprocess]

Not off the top of my head but if I figure it out I'll definitely let you know

[jasperkelder]

I just bumped into this bug too and did some digging. Apparently input[type=submit] is a 'replaced' element which cannot hold content. The ::before and ::after pseudo-elements are used to add content before or after an element's content. The only workaround to me seems to be applying a spinner background directly to the input element itself.

[lucaslarroche]

I don't have a clean workaround. Also <button type="submit">Submit</button> is working.

I might close this issue.

[longrunningprocess]

No worries, maybe you could add a reference in the docs to this conversation?