diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx index 7636a24cc1..19b6a324f3 100644 --- a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx +++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx @@ -1,10 +1,11 @@ import React, { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Layer, Search } from '@carbon/react'; -import { useDebounce, useLayoutType } from '@openmrs/esm-framework'; +import { useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework'; import { type DrugOrderBasketItem } from '../../types'; import OrderBasketSearchResults from './order-basket-search-results.component'; import styles from './order-basket-search.scss'; +import { type ConfigObject } from '../../config-schema'; export interface DrugSearchProps { openOrderForm: (searchResult: DrugOrderBasketItem) => void; @@ -14,7 +15,8 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) { const { t } = useTranslation(); const isTablet = useLayoutType() === 'tablet'; const [searchTerm, setSearchTerm] = useState(''); - const debouncedSearchTerm = useDebounce(searchTerm); + const { debounceDelayInMs } = useConfig(); + const debouncedSearchTerm = useDebounce(searchTerm, debounceDelayInMs ?? 300); const searchInputRef = useRef(null); const focusAndClearSearchInput = () => { diff --git a/packages/esm-patient-medications-app/src/config-schema.ts b/packages/esm-patient-medications-app/src/config-schema.ts index b268b977ce..88aeaf153f 100644 --- a/packages/esm-patient-medications-app/src/config-schema.ts +++ b/packages/esm-patient-medications-app/src/config-schema.ts @@ -30,6 +30,12 @@ export const configSchema = { _default: 99, _description: 'The maximum number of days for medication dispensing.', }, + debounceDelayInMs: { + _type: Type.Number, + _description: + 'Number of milliseconds to delay the search operation in the drug search input by after the user starts typing. The useDebounce hook delays the search by 300ms by default', + _default: 300, + }, }; export interface ConfigObject { @@ -40,4 +46,5 @@ export interface ConfigObject { drugOrderTypeUUID: string; showPrintButton: boolean; maxDispenseDurationInDays: number; + debounceDelayInMs: number; }