Material-ui: TextField outlined variant with fullWidth and endAdornment expands TextField off screen

[CrashCodes]

TextField outlined variant with fullWidth and endAdornment expands TextField off screen.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I expect TextField to be the same size and have same margins with and without an endAdornment.

Current Behavior 😯

endAdornment is rendered,
page scroll bar can be used to scroll right to see remainder of outline,
no margin on screen edge.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/rlk5kk10wp

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI/core | v3.9.2 |
| Material-UI/icons | v3.0.2 |
| React | 16.8.3 |
| Browser | chrome |

See Also:

Similar in nature, but not quite the same as: https://github.com/mui-org/material-ui/issues/8825

[oliviertassinari]

@CrashCodes Thank you for the report. it's not the first time we see this class of problem. It's a box-sizing issue: 9d270f6369. Ok, I think that we should be bolder here. What do you think of:

--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -97,7 +97,6 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '27px 12px 10px',
-      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `input` element. */
     input: {
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index b17880153..a8880796c 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -37,6 +37,7 @@ export const styles = theme => {
       color: theme.palette.text.primary,
       fontSize: theme.typography.pxToRem(16),
       lineHeight: '1.1875em', // Reset (19px), match the native input line-height
+      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
       cursor: 'text',
       display: 'inline-flex',
       alignItems: 'center',
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index 8113838fe..c7ec4704c 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -53,7 +53,6 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '18.5px 14px',
-      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `NotchedOutline` element. */
     notchedOutline: {},

Do you want to work on it? :)

[CrashCodes]

@oliviertassinari
Thanks for looking at this issue!

Ok, I think that we should be bolder here. What do you think of: ...

I think adding border-box to my InputProps fixes me up for today.

Moving border-box up to the base is quite bold. I'm scared. Think of the children variants!

Do you want to work on it? :)

Ha! I'd rather not. Besides, it looks like you found a solution for this one.

[oliviertassinari]

@CrashCodes We encourage people to reply on box-sizing: border-box already. Yes, it's a breaking change, but a good one.

[FMcIntosh]

I'd be happy to take this on. This would be my first issue (on any project, not just Material-UI), so I might need my hand held a little bit :)

[oliviertassinari]

@FMcIntosh This is awesome, you should be able to get started reading our Contributor.md :).