Rmwc: Textfield Label undesired padding-left

Created on 14 Nov 2017 · 13Comments · Source: jamesmfriedman/rmwc

In a code like
html <FormField> <Textfield id="firstname" label="First Name" /> </FormField>

the generated label tag gets "4px" as its padding-left style, which leads to an ugly look.

wontfix

Source

fterradev

All 13 comments

@fterradev, RMWC doesn't contain any of its own styles, it simply wraps the original material components provided by Google https://github.com/material-components/material-components-web/.

You are not required to wrap Textfields in the FormField component. According to the MDC docs, it's a helper for layout and RTL support. https://material.io/components/web/catalog/input-controls/form-fields/

jamesmfriedman on 14 Nov 2017

Thank you.
I was trying to migrate from pure vanilla HTML/JS/CSS components to rmwc.
So I've followed this example from https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md

And was trying to convert it to rmwc, which I thought could be:
````jsx
import React, { Component } from 'react';
import { Button, Typography, FormField, Textfield } from 'rmwc';

class App extends Component {
render() {
return (

Tell us about yourself!

    <form action="#" id="greeting-form">
      <div>
        <FormField>
          <Textfield id="firstname" label="First Name" />
        </FormField>

        <FormField>
          <Textfield id="lastname" label="Last Name" />
        </FormField>
      </div>

      <Button raised>Print Greeting</Button>
    </form>

    <Typography use="headline" tag="p"></Typography>
  </main>
);

}
}

export default App;

````

But this way it shifts the line under the text field by 4px to the right. It can be seen as the green band below, to the left.

But I expected it to look like the vanilla version:

If I don't wrap the Textfields into FormFields, they get joined:

A   between them will do it. But I think it would be very nice if my React code can match my vanilla code as much as possible.
Furthermore without the FormField as wrapper the font gets bigger.

It's also worth mentioning that rmwc generates the textfield as something like:
html <label class="mdc-textfield mdc-textfield--upgraded"><input type="text" class="mdc-textfield__input" id="firstname"><span class="mdc-textfield__label">First Name</span></label>

And it seems like I'm not able to make it generate as:
````html

First Name

        </div>

````

So the very root element is not what a user could need. The root element is label, even if the label attribute is undefined.
Thank you for your attention.

fterradev on 14 Nov 2017

Thank you for more detail. MDC has multiple recommended ways to build the textfield markup. Let me see if using the other one fixes your issue.

jamesmfriedman on 16 Nov 2017

👍1

@fterradev dug into this for you.

Turns out, the TextField component should not be placed inside of FormField per MDCs documentation. The FormField component only exists to provide some functionality when wrapping generic input label combos.

I've updated the docs to reflect this, I was showing incorrect usage
MDC 25 had a breaking name change. You'll have to change Textfield to TextField
You can layout the TextField component in a few ways
- Use The layout grid https://jamesmfriedman.github.io/rmwc/layout-grid
- Wrap it in a div or component that you can style that controls layout
- Style it directly, just give the TextField a className and use standard CSS.

jamesmfriedman on 16 Nov 2017

👍1

Just a heads up, I had a botched deploy with RC2 and missed some classnames. Make sure you upgrade to RC3.

jamesmfriedman on 16 Nov 2017

Man, bad day for RMWC. That breaking name changed really screwed me up. 3 releases later they should be working as billed... Use RC4.

jamesmfriedman on 16 Nov 2017

Seems to me like the FormField should work somehow with MDC input elements like TextField by reading documentation at
https://github.com/material-components/material-components-web/tree/master/packages/mdc-form-field
on MDCFormField.input, where it's assigned an MDCRadio instance.
Not sure though.

fterradev on 16 Nov 2017

There documentation isn't always the most up to date. Even though they say it should work (and it really should), I found the reason why.

The selector they use is looking for a direct child. The TextField component has a div wrapper. I'll file a but with Material.

jamesmfriedman on 16 Nov 2017

Ok.
Hey, rmwc now gives an error when wrapping TextField with FormField.

Code:
jsx <FormField> <TextField id="firstname" label="First Name" /> </FormField>
Error:
×
TypeError: Cannot read property 'addEventListener' of null
registerInteractionHandler
C:/.../node_modules/@material/form-field/dist/mdc.formField.js:1007
1004 |
1005 | return new __WEBPACK_IMPORTED_MODULE_1__foundation__["a" /* default */]({
1006 | registerInteractionHandler: function registerInteractionHandler(type, handler) {
> 1007 | return _this2.label_.addEventListener(type, handler);
1008 | },
1009 | deregisterInteractionHandler: function deregisterInteractionHandler(type, handler) {
1010 | return _this2.label_.removeEventListener(type, handler);
View compiled
MDCFormFieldFoundation.init
C:/.../node_modules/@material/form-field/dist/mdc.formField.js:1131
1128 | _createClass(MDCFormFieldFoundation, [{
1129 | key: 'init',
1130 | value: function init() {
> 1131 | this.adapter_.registerInteractionHandler('click', this.clickHandler_);
1132 | }
1133 | }, {
1134 | key: 'destroy',
View compiled
MDCFormField.MDCComponent
C:/.../node_modules/@material/form-field/dist/mdc.formField.js:260
257 | // this.root_ is defined and can be used within the foundation class.
258 | /** \@protected {!F} */
259 | this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
> 260 | this.foundation_.init();
261 | this.initialSyncWithDOM();
262 | }
263 |

fterradev on 17 Nov 2017

I know. Did you see the bug I just filed with MDC? This isn’t an issue on my end.

jamesmfriedman on 17 Nov 2017

Ok.
Yes, I saw it, but I still thought it was something with rmwc. I mean, I thought rmwc would just not be able to render it accordingly due to that issue, but I didn't thought it would cause such error.
And now I've just noticed that in fact FormField is giving error whenever it has no direct child label tag.

BTW, remember to replace the for attribute by an htmlFor one in https://jamesmfriedman.github.io/rmwc/form-fields.

fterradev on 17 Nov 2017

Cool, will do.

The reason it causes the error is because all of RMWC uses the Foundation javascript classes, and the error is with the actual MDC FormField constructor.

If you're just trying to layout with the form-field class, you can do the following:

<div className="mdc-form-field">
    <TextField .../>
</div>

I could also just catch any errors caused by the MDC constructors to insulate against them. To my knowledge this is the only situation where one has broken.

jamesmfriedman on 17 Nov 2017

@fterradev

I added a try catch around the MDC constructor. The bug still exists inside of MDC, but now at least RMWC will fail gracefully. Currently, it will put a warning in the console but your component will still render, it just won't have any of the MDC foundation class functionality.

jamesmfriedman on 20 Nov 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Hello from Preact 👋🏻

prateekbh · 6Comments

Persistent menu component without flashing

Anwardo · 6Comments

5.x: Error "this.foundation.handleScrimClick is not a function" on Drawer

danielmahon · 3Comments

Update to material-components-web 8

victorandree · 5Comments

webpack omits rmwc css in production mode due to "sideEffects: false"

darrencruse · 6Comments