v2 loading on search group not working

[longrunningprocess]

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?

[jonasgeiler]

Isn't this happening because inputs are literally ignored due to the :not(input, ...) selector here:

pico/scss/components/_loading.scss

Line 10 in 6dc6489

#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {

I have the same problem. Setting aria-busy="true" on the submit button in my form doesn't show the loading indicator. Although, the pointer-events: none style is being used, which is also defined in the _loading.scss file above. I don't think that's right.

Edit: I fixed it by just using a <button type="submit"> which is the recommended way anyway for modern HTML forms, since buttons can include more than just plain text.