TextField with other elements

[rhalaly]

Describe the feature that you would like added

TextField element renders a textarea or input elements hard-coded, which are cannot be extended much more.

I would like to be able to render a different element for the TextField, while keeping the Fabric look & feel. For example, DraftJS is an excellent text field that have really good plugins, and it is much richer than textarea or input, but it have no built it styles. So this feature request, allow us to use the DraftJS element but with the Fabric look & feel, which is awesome

The new render can be done by passing a renderElement prop to the TextField

What component or utility would this be added to

TextField

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

For some reason, which I don't understand why, Fabric is not using the common classes names such ms-TextField but it generate classes on the fly. So there is no way to apply Fabric look & feel with different element than what Fabric exports. For example from Fabric site:

There is not implementation for the ms-TextField, and all the styles are generated in the classes like root-228.

Letting us to pass the renderElement function, will let us to do such things.

[aneeshack4]

@rhalaly So if I understand correctly, you'd like to apply Fabric's styling to a non-Fabric component? Could you provide a codepen showing this DraftJS component & what you're trying to do to it with Fabric?

[rhalaly]

Sure, but before we'll dive into the code, I want to explain the scenario. The TextField component is very basic input component that is suits excellent to forms. But when you want extra features, like mentioning/tagging, hashtag or support bold style, it can not do that.

I know that Microsoft products (even those that are part of Microsoft office) are using DraftJS because it support mentioning. But it requires to implement the Fabric look & feel.

Lot of other Fabric components support custom rendering, but TextField doesn't.

Before writing CodePen sample code, here is the DraftJS docs: https://www.draft-js-plugins.com/plugin/mention My goal is to make the text box to look & feel as TextField and using Persona inside of the menu. Customize the menu is easy, but appling the TextField styles on the text box is hard...

[aneeshack4]

@rhalaly Are you trying to replace just the input element or the whole component? If you want to replace more than just the input picking up Fabric styling won't work.

I spoke with the component owner. Turns out this can be supported with inputAs or onRenderInput but not renderElement. But either way adding support for this is beyond the scope of immediate work right now and would likely have to go in the backlog for further consideration.

[rhalaly]

Thanks @aneeshack4, yes I want to replace just the input element inside the TextField.

Adding inputAs or onRenderInput sounds awesome!

Hope that this feature will be implemented soon :smiley:

[aneeshack4]

@rhalaly We'll add this feature request to the backlog for review. Thanks for reaching out to us!

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.