Floating labels break placeholder attribute

SSCCE

The “Floating Label” example in the docs actually shows this. The example has placeholder="[e-mail]" in the docs, but the placeholder value ([e-mail]) isn’t shown anywhere…

I’ve found myself working around this by adding a span in the label with the placeholder text. For example:

… which renders like this:

This isn’t ideal, obviously. It would be preferable for the input to behave as it does normally (showing placeholder text until user starts typing).

Env info

$ npx envinfo --system --browsers --npmPackages --binaries

npx: installed 1 in 0.845s

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 29.40 MB / 16.00 GB
    Shell: 5.1.0 - /usr/local/bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 88.0.1
    Safari: 14.0.2
  npmPackages:
    @parcel/babel-plugin-transform-runtime: 2.0.0-nightly.1823 => 2.0.0-nightly.1823
    @parcel/transformer-sass: 2.0.0-beta.2 => 2.0.0-beta.2
    @types/react-dom: 17.0.3 => 17.0.3
    @types/react-router-dom: 5.1.7 => 5.1.7
    @typescript-eslint/eslint-plugin: 4.20.0 => 4.20.0
    @typescript-eslint/parser: 4.20.0 => 4.20.0
    bootstrap: 5.0.1 => 5.0.1
    checkcss: 1.0.1 => 1.0.1
    eslint: 7.21.0 => 7.21.0
    eslint-config-standard: 16.0.2 => 16.0.2
    eslint-plugin-import: 2.22.1 => 2.22.1
    eslint-plugin-node: 11.1.0 => 11.1.0
    eslint-plugin-promise: 4.3.1 => 4.3.1
    eslint-plugin-react: 7.22.0 => 7.22.0
    eslint-plugin-react-hooks: 4.2.0 => 4.2.0
    fast-levenshtein: 3.0.0 => 3.0.0
    firebase: 8.4.2 => 8.4.2
    firebaseui: 4.8.0 => 4.8.0
    nanoid: 3.1.22 => 3.1.22
    parcel: 2.0.0-beta.1 => 2.0.0-beta.1
    react: ^16.13.1 => 16.14.0
    react-bootstrap: 2.0.0-alpha.1 => 2.0.0-alpha.1
    react-dom: ^16.13.1 => 16.14.0
    react-router-bootstrap: 0.25.0 => 0.25.0
    react-router-dom: 5.2.0 => 5.2.0
    sass: 1.32.12 => 1.32.12
    typescript: 4.2.3 => 4.2.3

[broofa]

Consider reopening? It looks like changing the .form-floating > .form-control::placeholder rule to only apply when input is not focused (i.e. so it reads .form-floating > .form-control:not(:focus)::placeholder), restores the default placeholder behavior.

https://codepen.io/broofa/pen/gOmwVPz

Edit: 'Realizing this is probably just a naive form of @alpadev’s solution but… maybe simpler is better here? There’s no transition on the appearance/disappearance of the placeholder text, but… still better than not having it at all, no?

[mdo]

This is by design, though we should drop the placeholder content in our docs for these. There’s not really a way to include the placeholder as well without removing the overall effect of the label being small once a value is entered.