fullWidth issue in TextField

packages / text-field / index.js / line no. 267, 268, 269

{label && !fullWidth ? this.renderLabel() : null} {outlined ? this.renderNotchedOutline() : null} {!fullWidth && !textarea && !outlined ? this.renderLineRipple() : null}

if fullWidth true then label should not be null and same for the lineRipple. if fullWidth = true then everything should be same only the length of the textbox should be 100% of the parent box. please look into it… (though in material-components-web the textfield’s behaviour is identical to this lib but logically nothing should change except width) @moog16 @bonniezhou

[qs-labs]

The only clarifier I would add to this is the MDC Web Text Field demo includes two ‘fullWidth’ text fields that both preserve the label, which admittedly led to some confusion on my end.

[moog16]

@souvanjana, yes this is by design. MDC React is built to match MDC Web, so we wouldn’t change the logic here. I see how it can be confusing, but if you need it to be a regular text field and take the full screen width, can you use width: 100%? Like so:

.your-mdc-text-field-fullwidth-class-name {
  width: 100%;
}