.Control > .Input with has-icons-right and is-loading overlap

[zprobinson]

This is about the Docs.

Overview of the problem

Loading spinner and icon overlap when an input wrapped in a control has both the is-loading class and the has-icons-right class with correct implementation.

This is about the Bulma Docs - This is where I found it as I messed about changing the HTML to understand the components better. This could also exist in the library though. I think the current version of bulma displayed on the docs could be older than the most recent release, based on some issue I was reading the other day about disabled vs is-disabled on anchor tags not displaying properly in the docs.

My browser is: Firefox 95.0.2 (64bit)

I am sure this issue is not a duplicate? I couldn't find a duplicate issue.

Description

Steps to Reproduce

1. A .control div contains the classes has-icons-right and is-loading
2. A .input input has a child span/i tag with is-right and correct implementation.

Expected behavior

I would expect the is-loading spinner to be the only graphic displayed, as the loading indicates that a user has likely utilized the input field already. The indication of the loading behavior trumps the indication of the input icon.

Actual behavior

Both the spinner and the icon were displayed at the same time, creating a confusing user experience.

I wonder if there is a way to add a style rule to apply visibility:hidden to the span icon whenever the parent control tag is loading.

There's probably a better way to go about it, but perhaps a naive implementation would look like:

.control.has-icons-right.is-loading > .span.is-right > i {
  visibility: hidden
}