Mask and DatePicker issue with Floating Label Plugin

[shoaibsharif]

Reproduction

https://formkit.link/8e1dd443d03b687d09f9b62642318d2d

Describe the bug

When I pre-filled value via ref on Mask or DatePicker Input, it's not showing the value. But when I focus on the inputs it shows the value.

Environment

• OS: [MacOS]
• Browser [Arc, Chrome]
• Version [0.17.x]

[glennlaysonjr]

I am able to reproduce the same bug. What I can see this is an issue with the CSS and not having target to look at on the input if there is a value in FormKit input. Right now the color is being controlled by:

[data-floating-label="true"][data-type="mask"]:not(:focus-within) input,
[data-floating-label="true"][data-type="datepicker"] input {
  transition-duration: 0.2s;
  transition-delay: 0.1s;
  color: transparent; /* causing issue above */
}

Possible simple addition to formkit to fix above issue:

if used the same data-has-value="true" found on the floating label element and adding it to the sibling input (with same functionally as the label true|false) you could then target the input to set the color in CSS to color: inherit;

[andrew-boyd]

This has been fixed in the latest release via the new data-empty prop available on core and pro component outer wrappers. You may need to clear cache: https://formkit.link/cb9c1b3d233e2c36b34061f1c441f334

If you're using pro inputs you'll need to be on 0.112.7 or later to have the data-empty attributes required for styling.