matsp/material-components-vue

Impossible to create a full-width text area with a label

vinaypai opened this issue · 2 comments

vinaypai commented

Describe the bug
A recent update to the text field component makes it impossible to have a full-width text area. The "classes" computation overrides the fullWidth property if there is a label.

classes () {
  return {
    'mdc-text-field--fullwidth': this.fullWidth && this.noLabel && !this.outlined,
    ...
  }
}

The Material Components Web documentation on this is a little confusing, but the demo does show a full width text area with an floating label that appears impossible to create with MCV.

To Reproduce

<m-text-field full-width textarea v-model="text" id="foo">
  <m-floating-label for="foo">Full-Width TextArea</m-floating-label>
</m-text-field>

Expected behavior
The text-field looks like the "Full Width Text" area in the upstream demo, but the fullwidth class isn't set.

The fix seems quite simple and I'll gladly send a pull request if you confirm that I'm not missing something obvious.

tychenjiajun commented

Oops...
PR is welcomed.

  • 👍1
vinaypai commented

Oops...
PR is welcomed.

Took a little while for me to get to this with the holidays, but here's the promised PR.