Material-ui: Outlined TextField

[KaRkY]

Is there a plan to add Outlined TextField?

https://material.io/design/components/text-fields.html

[TheRealArlie]

We would also need this component very urgently. I might be able to convince my employer to donate a certain amount if it makes it onto the todo list faster.

[srilman]

If no one is handling this, I can create the component and make a PR.

Also want to note that Material Design also introduced Filled Text Fields with the Outlined Text Fields in their specs. See https://material.io/design/components/text-fields.html (credit: KaRkY).

[ghost]

I was able to get a functioning NotchedOutline TextField working following along with material-components-web's implementation.

It's not polished yet with animations or anything, and there's a small spacing issue with the label that I'm still working through. Also there's got to be a better way than this <RootRef /> ref structure I've got going on, but hopefully this can get things started. Apologies for some of the TextField.js cruft- this is from my own encapsulation for work.

[TheRealArlie]

Hi @enagy-earnup,
this looks like a great intermediate solution. Thank you very much :D Can you explain me how to adapt this to a multiline Textinput as well?

Best,
Robin

[ghost]

@TheRealArlie I haven’t put any thought into that because it doesn’t fit my use case, but that should be pretty straightforward. In that case you can revert back to using an actual border with a focused and unfocused state that mirrors the underline behavior.

This code also works for Dropdowns as well, which will also take on the notched outline styles.

[mbrookes]

@enagy-earnup Nice job.

I also have a work-in-progress attempt at this, complete with animating the border thickness and color, and the notch opening, but ran into problems setting the notch width on mount for TextFields with a default value (the label appears over the top of the line before the opening appears).

It wasn't based on MCW though, as I couldn't unpick what they were doing, so I had so other issues to still solve such as setting the border width and height (I had hard-coded it as a stop-gap).

I also have a more complete implementation of the filled TextField, although IIRC, multiline still needs some work.

[gabrielvaz]

It will be nice to have that variable on the text fields.

[gabrielvaz]

@enagy-earnup submit a PR to the repository, your solution is great!

[enagy27]

@gabrielvaz (re: @enagy-earnup from my personal account) sure thing! I'll give it a go- looks like a big ticket getting it across the finish line

[enagy27]

@mbrookes thanks! I've put up a PR, but as requested over there, could use some help with testing on this, as the widespread use of RootRef has made the testing story a little murky.