diff --git a/client/src/components/inputs/Select.tsx b/client/src/components/inputs/Select.tsx index f3b56a3a6..a38dfba2f 100644 --- a/client/src/components/inputs/Select.tsx +++ b/client/src/components/inputs/Select.tsx @@ -4,22 +4,59 @@ import type { SelectProps } from "@mui/material/Select"; import Stack from "@mui/material/Stack"; import { FieldLabel } from "./FieldLabel"; import { ChevronDown } from "lucide-react"; +import Typography from "@mui/material/Typography"; interface SelectInputProps extends Omit, "label"> { fieldLabel?: string; required?: boolean; + placeholder?: string; + placeholderColor?: string; } export const SelectInput = ({ fieldLabel, required, + placeholder, + placeholderColor, ...props }: SelectInputProps) => { const theme = useTheme(); + const emptyPlaceholderColor = placeholderColor || theme.palette.text.disabled; + + const renderValue = (selected: any) => { + const isMultiple = Boolean((props as any).multiple); + const isEmpty = isMultiple + ? !Array.isArray(selected) || selected.length === 0 + : selected === undefined || selected === null || selected === ""; + + if (isEmpty && placeholder) { + return ( + + {placeholder} + + ); + } + + if (isMultiple) { + const items: string[] = Array.isArray(selected) ? selected : []; + const capitalized = items.map( + (item) => item.charAt(0).toUpperCase() + item.slice(1) + ); + return {capitalized.join(" | ")} as any; + } + + return selected as any; + }; const select = ( {...props} + displayEmpty + renderValue={renderValue} + inputProps={{ + ...(props.inputProps || {}), + "aria-placeholder": placeholder, + }} IconComponent={() => ( { - if (value.length === 0) { - return fallback; - } - const capitalized = value.map( - (item) => item.charAt(0).toUpperCase() + item.slice(1) - ); - return capitalized.join(" | "); -}; - type HeaderFilterProps = { selectedTypes: UptimeMonitorType[]; selectedStatuses: MonitorStatus[]; @@ -56,12 +46,10 @@ export const HeaderFilter = ({