Float-labels.js doesn't copy asterisk (*)

[matthew-dean]

I have a label like "First Name *". When Float-labels copies this as the placeholder for an associated input, it removes the asterisk. I'm not sure why this is happening, but I feel like the JS component is trying to be a little too clever here. Can I get it to just copy labels as-is?

[matthew-dean]

I discovered that, like #9, setting prioritize: 'placeholder' and inserting the text into the placeholder directly allowed this to work, but this still seems like bizarre behavior.

[pryley]

Float-labels only extracts the text content of the label instead of the full html content, it does this to avoid possible compatibility issues with unforeseen LABEL markup. It also removes any existing asterisk or colon.

https://github.com/geminilabs/float-labels.js/blob/3c002f7fef1385d09c4d9c0080f0d63ef496bbf6/src/float-labels.js#L153-L156

Removing the asterisk from the label allows for more flexible styling options (see https://geminilabs.github.io/float-labels.js/), however, it's very easy to put back with CSS:

.fl-is-required label.fl-label::after {
    content: '\2009\002a';
}

[pryley]

Ok I've released v3.2.0. This version improves the placeholder logic for SELECT fields and adds a customPlaceholder callback option. You can now do the following:

const floatlabels = new FloatLabels( '.form-1', {
    // append an asterisk to the labels of required fields
    customLabel: function( labelEl, el ) {
        return labelEl.textContent + ( el.getAttribute( 'required' ) !== null ? ' *' : '' );
    },
    // append an asterisk to the placeholders of required fields
    customPlaceholder: function( placeholderText, el ) {
        return placeholderText + ( el.getAttribute( 'required' ) !== null ? ' *' : '' );
    },
});