Using a fullWidth TextField and InputAdornment messes with the input width

[stefyrosca]

When I use a TextField with an Adornment through the InputProps, if I set the width of the TextField component, either with fullWidth or with style property, the input field remains at the default width, only the root element takes the full space.

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

Expected Behavior

The input should receive the properties from the TextField even if I use the InputAdornment or not. Without it, the component renders ok.

Current Behavior

The root element changes its width, the input not.

Steps to Reproduce (for bugs)

Minimum example:
https://codesandbox.io/s/k2wn0166y7

Your Environment

Tech	Version
Material-UI	1.0.0-beta.18
React	16.0.0
browser	Google Chrome 61
etc

[damianobarbati]

+1 for this.

@oliviertassinari would it be possible to support <CircularProgress /> too as adornment on inputs?
Very nice to have on selects which load options asynchronously :)

[oliviertassinari]

@damianobarbati Have you tried doing so? How does it render? Do you see override generic enough we can move into the core components?

[damianobarbati]

Yes, with the following (excerpt):

render = () => {
    ....
    const endAdornment = <CircularProgress />;

    const input = (
        <Input
            type={'text'}
            name={name}
            onFocus={onFocus}
            onBlur={onBlur}
            maxLength={maxLength}
            disabled={disabled}
            readOnly={readOnly}
            placeholder={placeholder}
            startAdornment={startAdornment}
            endAdornment={endAdornment}
            fullWidth={true}
            margin={'dense'}
        />
    );

    const selectValue = !multiple ?
        String(value || '') :
        (value || []) ;

    return (
        <FormControl className={cx(className)} fullWidth={true} required={!!required} error={!!errors}>
            {!disableLabel &&
            <InputLabel htmlFor={name}>{displayName || name}</InputLabel>
            }
            <MuiSelect input={input} value={selectValue} multiple={multiple} onChange={onChange} classes={{ icon: cx({ [classes.hideMoreIcon]: computing }) }}>{options}</MuiSelect>
            { !errors && description &&
            <FormHelperText>{description}</FormHelperText>
            }
            { errors &&
            <FormHelperText>{errors}</FormHelperText>
            }
        </FormControl>
    );
}

It renders the <CircularProgress /> on the left "fullsize":

Maybe whatever is passed along as adornment should be constrained to respect the Input height "no matter what"? I really suck at CSS so I didn't try classes overriding.

[Jannis]

@damianobarbati What happens if you wrap the CircularProgress in an InputAdornment?

See https://github.com/callemall/material-ui/pull/8504/files#diff-3d0c58268ffed10a2bd03ed4b6799ebbR53 for an example.

[damianobarbati]

@Jannis same with explicit endAdornment:

const computingAdornment = (
    <InputAdornment position={'end'}>
        <CircularProgress />
    </InputAdornment>
);

<Input
    ...
    ...
    endAdornment={computingAdornment}

It slightly moved to the top overlapping the label but still on the left :)

[Jannis]

Ok, I thought it might be worth checking. :)

[turbochef]

If anyone's still struggling with this, this'll fix it for you.

    amountField: {
      boxSizing: 'border-box',
    },

....

<TextField
  fullWidth
  InputProps={{
    className:classes.amountField,
    startAdornment: <InputAdornment position="start">$</InputAdornment>,
  }}
/>

[oliviertassinari]

@turbochef You should be able to remove this style in v4. It was fixed in #14988.