diff --git a/packages/frontend/components/Form/Select.tsx b/packages/frontend/components/Form/Select.tsx index cb9806404..6aeefa3d4 100644 --- a/packages/frontend/components/Form/Select.tsx +++ b/packages/frontend/components/Form/Select.tsx @@ -25,8 +25,8 @@ type PlanSelectProps = { /** Are the field values numbers. */ isNumeric?: boolean; isSearchable?: boolean; - /** An option in the select dropdown that indicates "no selection". */ - noValueOptionLabel?: string; + /** The default text shown in the input box. */ + placeholder?: string; /** Fuzzy options to use */ useFuzzySearch?: boolean; }; @@ -41,7 +41,7 @@ export const PlanSelect: React.FC = ({ rules, isNumeric, isSearchable, - noValueOptionLabel, + placeholder, useFuzzySearch, }) => { const filterOptions = useFuzzySearch @@ -73,12 +73,6 @@ export const PlanSelect: React.FC = ({ label: val, })); - let noValueOption; - if (noValueOptionLabel) { - noValueOption = { value: null, label: noValueOptionLabel }; - selectOptions.unshift(noValueOption); - } - const onChange = (option: any) => { let val = option ? option.value : null; onChangeSideEffect && onChangeSideEffect(val); @@ -94,9 +88,16 @@ export const PlanSelect: React.FC = ({ if (isNumeric) { selectedValue = value ? value.toString() : null; } - const selectedOption = - selectOptions.find((option: any) => option.value === selectedValue) ?? - noValueOption; + const selectedOption = selectOptions.find( + (option: any) => option.value === selectedValue + ); + + const styles = { + control: (baseStyles: any, state: { isFocused: any }) => ({ + ...baseStyles, + borderColor: state.isFocused ? "neutral.200" : "neutral.100", + }), + }; return ( @@ -109,11 +110,12 @@ export const PlanSelect: React.FC = ({ {label}