Rmwc: Can't bring focus by clicking on a textfield that uses both `fullwidth` and `outlined` prop

[istisiki]

What RMWC Version are you using?

"rmwc": "^1.6.3"

What browser(s) and React Version is this bug affecting?

Chrome: Version 66.0.3359.139 (Official Build) (64-bit)
Firefox: 61.0b4 (64-bit)
Safari: 11.1 (13605.1.33.1.4)

What build system are you using?

Create React App

What are the steps to reproduce the bug?

Just use the outlined prop with fullwidth like so:
<TextField withTrailingIcon="arrow_drop_down" fullwidth outlined label="Search..." />

What is the expected behavior?

This should generate a textfield with a trailing icon and is outlined. I should be able to bring focus to the textfield by clicking on it or tabbing into it.

What is the actual behavior?

An outlined textfield with a trailing icon is generated, however, I can only bring focus to it by tabbing. When I click on it, nothing happens.

[j-o-d-o]

Hi, looking at the MDC textfield documentation (https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield), it says

NOTE: Do not use mdc-text-field--box or mdc-text-field--outlined to style a full width text field.

[istisiki]

You're right, @j-o-d-o
Thanks!

Closing.

[jamesmfriedman]

As an addendum, in my own code it's often easier to just make the TextField width: 100% which gives you a fullwidth text field without these random bugs ;)

[istisiki]

Thanks for the tip, @jamesmfriedman!