fix: adjust width for non multi select inputs (#11911)

This commit is contained in:
Elizabeth Thompson 2020-12-03 11:27:17 -08:00 committed by GitHub
parent 9ae2f95b34
commit 04f993e222
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 4 deletions

View File

@ -257,12 +257,11 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
],
};
const inputTagStyles = {
const INPUT_TAG_BASE_STYLES = {
background: 'none',
border: 'none',
outline: 'none',
padding: 0,
width: '100%',
};
export type SelectComponentsType = Omit<
@ -323,14 +322,18 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
selectProps: { isMulti, value, placeholder },
getStyles,
} = props;
const isMultiWithValue = isMulti && Array.isArray(value) && value.length;
const isMultiWithValue = isMulti && Array.isArray(value) && !!value.length;
return (
<Input
{...props}
placeholder={isMultiWithValue ? placeholder : undefined}
css={getStyles('input', props)}
autocomplete="chrome-off"
inputStyle={inputTagStyles}
inputStyle={
isMultiWithValue
? { ...INPUT_TAG_BASE_STYLES, width: '100%' }
: INPUT_TAG_BASE_STYLES
}
/>
);
},