Input labels to not transitioning upward on partial document replacements

[bcasci]

I am using Turbo to update portions of the HTML document. In this situation, the input labels to not move up when an input had a placeholder or value. On a full page reload, the labels will behave as expected.

I took a look at the Beer CSS source code, and also a look at various styles for input and label in the browser inspector, but it was not obvious how the labels are made to move up on a page load. Though I did notice after a page load that any input without a placeholder attribute will get an empty placeholder attribute applied to it. Is there a function in beercss.js that I should after a DOM manipulation in order to replicate the default behavior?

Also, on the server-side, I did try applying an active class on the label, and injecting a blank placeholder. While this does getting the label to move up, the label has a transparent background that causes the input border to strike through it. Is there a way to work around this?

[bcasci]

By the way, I do have a work-around. While it works, but I'd rather do it the beercss way, if that solution exists.

document.addEventListener("turbo:load", function () {
  var inputs = document.querySelectorAll("input");
  inputs.forEach(function (input) {
    if (input.value) {
      input.placeholder = " ";
    }
  });
});

[leonardorafael]

Hi @bcasci ,

Can you provide a codepen or something like that?

There are 2 methods to move up the label https://github.com/beercss/beercss/blob/main/docs/INPUT.md

1) You can add an active class on label and input 2) You can add a placeholder=" " attribute on input (a pure css solution)

If you use the method 2 to handle move up label, it's only a pure CSS solution (it should work in all ways).

[leonardorafael]

There are a different behavior in your app, maybe an extra CSS that applies some styles on elements?

[leonardorafael]

Any progress here?

[bcasci]

I apologize for not being communicative. Life got very hectic! I have not been able to identify the cause yet, but I can reproduce the behavior predictably in my app now.

I am using Turbo in this app, and the label anomaly only occurs when the DOM is partially modified by Turbo. Everything works fine on the initial page load. For example a form were submitted, resulting in a 422, and the current form HTML being replaced by new form HTML. The label styles will not transition upward after the the DOM modification, regardless of the inputs having a placeholder of " ", or "active" classes on the inputs and labels.

The only way I can get the label transition upward to happen after a partial DOM update is with the following client-side javascript code, which injects an empty place holder after the DOM manipulation.

function updateInputPlaceholders() {
  const inputs = document.querySelectorAll("input");
  inputs.forEach((input) => {
    if (input.placeholder === "") {
      input.placeholder = " ";
    }
  });
}

document.addEventListener("turbo:render", updateInputPlaceholders);

As an aside, a label will not transition upward on an initial page load for an input that has a palceholder. See this codepen: https://codepen.io/Brandon-Casci/pen/mdgZGyj

This is similar to what I am experiencing, but with values present instead of a placeholder, and after DOM updates. Maybe this is a clue?

[leonardorafael]

Oh I see now,

By default, we use the placeholder=" " on input to move the label to up/down. This is a pure CSS solution.

But, in your case, you want to show the placeholder text. So you can add a active class to label and input like here https://github.com/beercss/beercss/blob/main/docs/INPUT.md#method-1

<div class="field label border">
  <input placeholder="Your placeholder text" class="active">
  <label class="active">Label</label>
</div>

I updated your pen with a new input at end https://codepen.io/leo-bnu/pen/VwNJEOe, hope this helps.

[bcasci]

Yes, that does. I just need to update my form building logic. I did not understand how to correctly use the classes and attributes. Thank you.