[portal][ui] allow value to be specified for comapnies and job titles typeahead

pull/459/head
Yangshun Tay 2 years ago
parent 2a4045cbcc
commit 6746f54792

@ -11,6 +11,7 @@ type Props = Readonly<{
onSelect: (option: TypeaheadOption | null) => void; onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string; placeholder?: string;
required?: boolean; required?: boolean;
value?: TypeaheadOption | null;
}>; }>;
export default function CompaniesTypeahead({ export default function CompaniesTypeahead({
@ -19,6 +20,7 @@ export default function CompaniesTypeahead({
isLabelHidden, isLabelHidden,
placeholder, placeholder,
required, required,
value,
}: Props) { }: Props) {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const companies = trpc.useQuery([ const companies = trpc.useQuery([
@ -47,6 +49,7 @@ export default function CompaniesTypeahead({
placeholder={placeholder} placeholder={placeholder}
required={required} required={required}
textSize="inherit" textSize="inherit"
value={value}
onQueryChange={setQuery} onQueryChange={setQuery}
onSelect={onSelect} onSelect={onSelect}
/> />

@ -10,6 +10,7 @@ type Props = Readonly<{
onSelect: (option: TypeaheadOption | null) => void; onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string; placeholder?: string;
required?: boolean; required?: boolean;
value?: TypeaheadOption | null;
}>; }>;
export default function JobTitlesTypeahead({ export default function JobTitlesTypeahead({
@ -18,6 +19,7 @@ export default function JobTitlesTypeahead({
isLabelHidden, isLabelHidden,
placeholder, placeholder,
required, required,
value,
}: Props) { }: Props) {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const options = Object.entries(JobTitleLabels) const options = Object.entries(JobTitleLabels)
@ -42,6 +44,7 @@ export default function JobTitlesTypeahead({
placeholder={placeholder} placeholder={placeholder}
required={required} required={required}
textSize="inherit" textSize="inherit"
value={value}
onQueryChange={setQuery} onQueryChange={setQuery}
onSelect={onSelect} onSelect={onSelect}
/> />

@ -37,7 +37,7 @@ type Props = Readonly<{
onSelect: (option: TypeaheadOption | null) => void; onSelect: (option: TypeaheadOption | null) => void;
options: ReadonlyArray<TypeaheadOption>; options: ReadonlyArray<TypeaheadOption>;
textSize?: TypeaheadTextSize; textSize?: TypeaheadTextSize;
value?: TypeaheadOption; value?: TypeaheadOption | null;
}> & }> &
Readonly<Attributes>; Readonly<Attributes>;
@ -90,6 +90,8 @@ export default function Typeahead({
return ( return (
<div> <div>
<Combobox <Combobox
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
by="id" by="id"
disabled={disabled} disabled={disabled}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -104,7 +106,7 @@ export default function Typeahead({
onChange={(newValue) => { onChange={(newValue) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
onSelect(newValue as TypeaheadOption); onSelect(newValue as TypeaheadOption | null);
}}> }}>
<Combobox.Label <Combobox.Label
className={clsx( className={clsx(

Loading…
Cancel
Save