diff --git a/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx b/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx index 46832c0a39..896154dc90 100644 --- a/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx +++ b/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx @@ -72,7 +72,7 @@ export const FlagsSelect: React.FC = (props) => { flag.text} groupBy={(flag) => flag.category} diff --git a/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx b/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx index 9fb64dc58a..1f8fc49f1c 100644 --- a/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx +++ b/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx @@ -38,7 +38,7 @@ export interface Props { const Item = styled(Box)(({ theme }) => ({ display: "flex", - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(2), })); export default function ListManager( diff --git a/editor.planx.uk/src/ui/shared/SelectMultiple.tsx b/editor.planx.uk/src/ui/shared/SelectMultiple.tsx index 5fd4812ea8..8de9e6c9c4 100644 --- a/editor.planx.uk/src/ui/shared/SelectMultiple.tsx +++ b/editor.planx.uk/src/ui/shared/SelectMultiple.tsx @@ -42,7 +42,6 @@ type WithPlaceholder = { type Props = WithLabel | WithPlaceholder; const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({ - marginTop: theme.spacing(2), "& > div > label": { paddingRight: theme.spacing(3), }, @@ -113,9 +112,14 @@ export const CustomCheckbox = styled("span")(({ theme }) => ({ })); export function SelectMultiple(props: Props) { + // MUI doesn't pass the Autocomplete value along to the TextField automatically + const isSelectEmpty = !props.value?.length; + const placeholder = isSelectEmpty ? props.placeholder : undefined + return ( + sx={{ mt: props.label ? 2 : 0 }} role="status" aria-atomic={true} aria-live="polite" @@ -129,9 +133,9 @@ export function SelectMultiple(props: Props) { InputProps={{ ...params.InputProps, notched: false, - placeholder: props?.placeholder }} label={props.label} + placeholder={placeholder} /> )} ChipProps={{