diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx index 39f35a4fcf4..66e0592511c 100644 --- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx +++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx @@ -26,6 +26,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) { const hasError = !!props.disallowed.find((d) => d?.id === selected?.id); const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, { + prefetch: false, silent: true, }); diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx index 7fea2d4c6e7..4e7892a6a64 100644 --- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx +++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx @@ -26,6 +26,7 @@ type AutocompleteMultiSelectFormFieldProps = FormFieldBaseProps & { optionDisabled?: OptionCallback; onQuery?: (query: string) => void; dropdownIcon?: React.ReactNode | undefined; + minQueryLength?: number; isLoading?: boolean; selectAll?: boolean; }; @@ -64,6 +65,7 @@ type AutocompleteMutliSelectProps = { isLoading?: boolean; selectAll?: boolean; error?: string; + minQueryLength?: number; }; /** @@ -80,7 +82,9 @@ export const AutocompleteMutliSelect = ( const [query, setQuery] = useState(""); // Ensure lower case const comboButtonRef = useRef(null); useEffect(() => { - props.onQuery && props.onQuery(query); + query.length >= (props.minQueryLength || 1) && + props.onQuery && + props.onQuery(query); }, [query]); const handleSingleSelect = (o: any) => { if (o.option?.isSingleSelect === true && comboButtonRef.current) { @@ -175,7 +179,11 @@ export const AutocompleteMutliSelect = ( as="ul" className="cui-dropdown-base absolute top-12 z-10 mt-0.5" > - {props.isLoading ? ( + {props.minQueryLength && query.length < props.minQueryLength ? ( +
+ {`Please enter at least ${props.minQueryLength} characters to search`} +
+ ) : props.isLoading ? ( ) : filteredOptions.length ? ( <> diff --git a/src/Components/Patient/DiagnosesFilter.tsx b/src/Components/Patient/DiagnosesFilter.tsx index c4c4872fdda..1217e821389 100644 --- a/src/Components/Patient/DiagnosesFilter.tsx +++ b/src/Components/Patient/DiagnosesFilter.tsx @@ -37,6 +37,7 @@ export default function DiagnosesFilter(props: Props) { const [diagnoses, setDiagnoses] = useState([]); const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, { silent: true, + prefetch: false, }); useEffect(() => { @@ -72,6 +73,7 @@ export default function DiagnosesFilter(props: Props) { name="icd11_search" className="w-full" placeholder={t("search_icd11_placeholder")} + minQueryLength={2} value={diagnoses} onChange={(e) => { setDiagnoses(e.value);