Select with endAdornment overlaps with arrow icon

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Adornment overlaps with the arrow icon of the Select field.

Expected Behavior 🤔

The adornment should be displayed to the left of the arrow or should push the arrow icon and clickable field to the left.

In version 3.6.1, the clickable field with the arrow icon was pushed to the left when a adornment was added.

Steps to Reproduce 🕹

Steps:

1. Create a Select field.
2. Add InputAdornment with position="end" to the endAdornment prop.

<Select
    endAdornment={
        <InputAdornment position="end">
            <IconButton>
                <ClearIcon />
            </IconButton>
        </InputAdornment>
    }/>

Context 🔦

Updating material-ui from version 3.6.1 to 4.5.0 caused this issue.

Your Environment 🌎

Tech	Version
Material-UI	v4.5.0
React	16.10.2
Browser	Any
TypeScript
etc.

[CaptainT33mo]

@oliviertassinari I used the code from the asynchronous demo of autocomplete and modified as per my requirement a little but still the resulting autocomplete component shows a loading icon overlapped on the cross and down icon.

here is the code:

			<Autocomplete
				id={id}
				name={name || id}
				open={open}
				onOpen={() => {
					setOpen(true);
				}}
				onClose={() => {
					setOpen(false);
				}}
				getOptionSelected={(option, value) => option.name === value.name}
				getOptionLabel={option => option.name}
				filterOptions={filterOptions}
				options={options}
				noOptionsText={
					options.length > 0
						? "Matching area not found"
						: "Please select a city"
				}
				blurOnSelect
				onChange={handleChange}
				loading={loading}
				loadingText={cityName ? "Loading..." : "Please select a city"}
				value={stateValue}
				popupIcon={<ChevronDownIcon className="MuiSvgIcon-root" />}
				renderInput={params => (
					<TextField
						{...params}
						name={name || id}
						label={label}
						fullWidth
						color="secondary"
						variant="outlined"
						placeholder={placeholder}
						error={errorState}
						helperText={errorState ? "Please select area from dropdown" : ""}
						InputProps={{
							...params.InputProps,
							endAdornment: (
								<>
									{loading ? (
										<CircularProgress
											// color="currentColor"
											size={20}
										/>
									) : null}
									{params.InputProps.endAdornment}
								</>
							),
						}}
					/>
				)}
			/>

Screenshot:

[oliviertassinari]

@Floriferous we have an example for it in the demos. https://material-ui.com/components/autocomplete/#asynchronous-requests

      renderInput={(params) => (
        <TextField
          {...params}
          label="Asynchronous"
          variant="outlined"
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <React.Fragment>
                {loading ? <CircularProgress color="inherit" size={20} /> : null}
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
        />
      )}