Rmwc: feat: add support for pre-filled text fields

[nicholaschiang]

• What RMWC Version are you using [major.minor.patch]:

^6.0.9

• Name your build system [Webpack, Rollup...]:

Same as specified in #598.

• Describe the bug with as much detail as possible:

I'd like to have support for a prefilled boolean attribute on the TextField wrapper. It should add all the necessary classes as described here. Note that this should work without a value (i.e. you can have a seemingly empty text field and still have it styled as if it were full).

This feature would be useful to add custom elements inside of the text field (e.g. a ChipSet) and then style the text field as filled even if it's input element's value is empty.

[nicholaschiang]

Current workaround is to just set the TextField's value prop to a non-breaking space whenever the TextField contains stuff:

  /**
   * Workaround for styling the input as if it has content. If there are 
   * subjects selected (in the given `subjects` object), this will return a
   * string containing a space (`' '`) so that the `TextField` styles itself as
   * if it were filled.
   * @todo Ideally, remove this workaround. But instead, make the `&nsbp;` 
   * actually show up as a non-breaking space (i.e. nothing).
   * @see {@link https://github.com/jamesmfriedman/rmwc/issues/601}
   * @return {string} The input value (either `' '` or `''`).
   */
  getInputValue(subjects: { [subject: string]: boolean }) {
    const subjectsSelected = Object.values(subjects).reduce((a, b) => a || b);
    return subjectsSelected ? '\xa0' : '';
  }

However, this doesn't seem to be working as my non-breaking space (\xa0) keeps on being converted back into a normal space by TextField.

[jamesmfriedman]

Read through the description. Some thoughts

• The MDC documentation describes making the label float if there is a value already to prevent seeing the label move. RMWC should just support this. Right now it's less of a bug, and more of an inconvenience
• We could have a prefilled prop, but to me that sounds something like floatLabelByDefault which would start the label in a floating position, but then respond accordingly if they edit it.
• What it sounds like you would like to do is to be able to control the label floating externally. We could have a floatLabel prop that you could set to true and you would always be in control of it.

I think the last option sounds like the "correct" one if there is such a thing.

[nicholaschiang]

Yup, that last option sounds good! Is this already implemented?

[nicholaschiang]

Hey @jamesmfriedman that last option sounds good. Any work on this already? Or should I try to decode the @rmwc/textfield source code and open a PR myself?

[nicholaschiang]

@jamesmfriedman we really need this functionality; it's causing some serious problems with our new UserDialog as well:

The prefilled TextField's notches are notched as they should be.

[nicholaschiang]

See this issue for more details about our original problem.

[jamesmfriedman]

I'm glad you're getting a lot of use out of the library.

I went ahead and added a floatLabel prop directly to textfield that lets you override whatever it wants to do. It doesn't animate the label, but it does indeed work.

I readily accept PRs, so don't be afraid to get your hands dirty as well ;). Tests running as we speak, should be published shortly 6.1.0.