[TextField] InputAdornment shouldn't wrap

[TrejGun]

start and end input adormants wraps long lines

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

Expected Behavior 🤔

start and end input adormants should not wraps long lines

Current Behavior 😯

long lines are wrapped

Steps to Reproduce 🕹

      <TextField
        margin="dense"
        type="number"
        name="price"
        InputProps={{
          startAdornment: <InputAdornment position="start">blah blah</InputAdornment>,
          endAdornment: <InputAdornment position="end">blah blah</InputAdornment>,
        }}
      />

Possible solution

add

whiteSpace: "nowrap"

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	16.8.2
Browser	chrome
TypeScript	-
etc.

[eps1lon]

Could you provide a concrete example? I don't think we should support adding "blah blah" as adornments out of the box 😉

[TrejGun]

my case is ",000 Rp" after price

[olistic]

Hi @eps1lon, I take from your comment that there's a limitation on the length of the adornments?

I have the following use case:

[eps1lon]

They are really just intended for little adornments. You can probably change the styling to increase the width.

Have you tried using helperText instead? Sounds more appropriate.

The spec has a different solution for units in the form of start/end icons. We can look into implementing those.

[olistic]

Thanks for your suggestions. Overriding the InputAdornment's root CSS with white-space: nowrap; did the trick for me.

[TrejGun]

on this page google uses pretty long adorment "@gmail.com"
https://material.io/design/components/text-fields.html#filled-text-field

[oliviertassinari]

It seems that Bootstrap uses the same approach with the prepend: https://getbootstrap.com/docs/4.4/components/forms/#inline-forms.

I think that we can move forward with the proposed fix:

diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 6c05f8ab9..6c6149270 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -12,6 +12,7 @@ export const styles = {
     height: '0.01em', // Fix IE 11 flexbox alignment. To remove at some point.
     maxHeight: '2em',
     alignItems: 'center',
+    whiteSpace: 'nowrap',
   },
   /* Styles applied to the root element if `variant="filled"`. */
   filled: {

@olistic Do you want to push it further?

[TrejGun]

#18641