Add prefix and suffix for text fields

[ribrdb]

Feature Request

Please add support for prefixes and suffixes as shown here:
https://material.io/guidelines/components/text-fields.html#text-fields-input-types

This seems like it's probably pretty similar to the leading and trailing icons you already support.

[mikehans9]

@lynnmercier @acdvorak jesus......almost one year and the most basic feature for textfields still not done? a simple prefix/suffix? crazy.

[jamesmfriedman]

This just came up for RMWC. Thinking about adding it in myself, but it isn't actually easy to support. This is a relatively complex issue due to the fact that the size of the prefix or suffix is unknown so it can't just be added like the icons are with padding. The solution then would be something like making the container display flex, but having the input only be a small piece of it, and having the other elements outside of it, then deferring focus to the input if anything else is clicked.

[ChainsDD]

I've created a mostly working solution. I still need to support leading and trailing icons, and convert it to a material component. Once that's done I'll post it here to get some more feedback.

Basically I'm positioning a span on top of the input, and adjusting the padding of the input to account for it. It's working pretty well, I'll try and throw something up on codepen to demonstrate it.

edit) Here's what I've got so far. Like I said, still need to support leading/trailing icons, and turn it into a material component, but it works as far as I can tell. Definitely open to feedback, I'm fairly new to this kind of development.

last edit) Icon support added to the pen, just added CSS classes to the affixes to adjust their padding if there's an icon.

[patrickrodee]

@asyncLiz