Style tweak on async select component

onaio · Sep 19, 2024 · 3ae8f79 · 3ae8f79
1 parent e2efebc
commit 3ae8f79
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css
@@ -0,0 +1,3 @@
+.asyncSelect{
+    min-width: 240px;
+}
diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx
@@ -5,6 +5,7 @@ import { SelectProps, DefaultOptionType } from 'antd/lib/select';
 import { useTranslation } from '../../../mls';
 import { UseQueryOptions, useQuery } from 'react-query';
 import { TFunction } from '@opensrp/i18n';
+import "./index.css"
 
 export type RawValueType = string | number | (string | number)[];
 

diff --git a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx
@@ -173,7 +173,7 @@ export function PaginatedAsyncSelect<ResourceT extends IResource>(
   const remainingRecords = totalPossibleRecords - recordsFetchedNum;
 
   const propsToSelect = {
-    style: { minWidth: '200px' },
+    className: "asyncSelect",
     ...restProps,
     placeholder,
     onChange: changeHandler,

diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx
@@ -54,6 +54,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
   const selectDropDownRender = dropDownFactory(t, data, error as Error);
 
   const selectProps = {
+    className: "asyncSelect",
     dropdownRender: selectDropDownRender,
     options: data,
     loading: isLoading,