Skip to content

Commit ce62097

Browse files
committed
Fix AutocompleteInput has hole in the outline when no label
1 parent 42e97cf commit ce62097

File tree

2 files changed

+21
-1
lines changed

2 files changed

+21
-1
lines changed

packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1329,3 +1329,14 @@ export const WithInputProps = () => (
13291329
/>
13301330
</Wrapper>
13311331
);
1332+
1333+
export const OutlinedNoLabel = () => (
1334+
<Wrapper onSuccess={console.log}>
1335+
<AutocompleteInput
1336+
source="author"
1337+
choices={defaultChoices}
1338+
label={false}
1339+
variant="outlined"
1340+
/>
1341+
</Wrapper>
1342+
);

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -643,7 +643,11 @@ If you provided a React element for the optionText prop, you must also provide t
643643
}
644644
margin={margin}
645645
variant={variant}
646-
className={AutocompleteInputClasses.textField}
646+
className={clsx({
647+
[AutocompleteInputClasses.textField]: true,
648+
[AutocompleteInputClasses.emptyLabel]:
649+
label === false || label === '',
650+
})}
647651
{...params}
648652
{...TextFieldProps}
649653
InputProps={mergedTextFieldProps}
@@ -725,6 +729,7 @@ const PREFIX = 'RaAutocompleteInput';
725729

726730
export const AutocompleteInputClasses = {
727731
textField: `${PREFIX}-textField`,
732+
emptyLabel: `${PREFIX}-emptyLabel`,
728733
};
729734

730735
const StyledAutocomplete = styled(Autocomplete, {
@@ -734,6 +739,10 @@ const StyledAutocomplete = styled(Autocomplete, {
734739
[`& .${AutocompleteInputClasses.textField}`]: {
735740
minWidth: theme.spacing(20),
736741
},
742+
[`& .${AutocompleteInputClasses.emptyLabel} .MuiOutlinedInput-root legend`]:
743+
{
744+
width: 0,
745+
},
737746
}));
738747

739748
// @ts-ignore

0 commit comments

Comments
 (0)