search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.39k stars 387 forks source link

v2 loading on search group not working #411

Open longrunningprocess opened 11 months ago

longrunningprocess commented 11 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

jasperkelder commented 7 months ago

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 commented 7 months ago

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

I might close this issue.

longrunningprocess commented 7 months ago

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

jonasgeiler commented 3 weeks ago

Isn't this happening because inputs are literally ignored due to the :not(input, ...) selector here: https://github.com/picocss/pico/blob/6dc6489e69cc1f22daa938ebd38c02400032428c/scss/components/_loading.scss#L10

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.