From ff2bdcd4306527d7048d423a60cadc8bb05ccda9 Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Thu, 17 Oct 2024 08:02:39 +0700 Subject: [PATCH 1/8] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 647040a..2aa5d3e 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ yarn add react-native-element-dropdown | itemTextStyle | TextStyle | No | Styling for text item in list | | activeColor | String | No | Background color for item selected in list container | | search | Boolean | No | Show or hide input search | +| searchBothFields | Boolean | No | Search by valueField and labelField | | searchQuery | (keyword: string, labelValue: string) => Boolean| No | Callback used to filter the list of items | | inputSearchStyle | ViewStyle | No | Styling for input search | | searchPlaceholder | String | No | The string that will be rendered before text input has been entered | From b91e6b7287d6614e358f9e2d175220ca6109b002 Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Thu, 17 Oct 2024 08:03:56 +0700 Subject: [PATCH 2/8] Update model.ts --- src/components/Dropdown/model.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts index a32bba5..2797cc3 100644 --- a/src/components/Dropdown/model.ts +++ b/src/components/Dropdown/model.ts @@ -41,6 +41,7 @@ export interface DropdownProps { valueField: keyof T; searchField?: keyof T; search?: boolean; + searchBothFields?: boolean; searchPlaceholder?: string; searchPlaceholderTextColor?: string; disable?: boolean; From fd183df252bf620b3b26e7ff62ac549b94cd417e Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Thu, 17 Oct 2024 08:06:51 +0700 Subject: [PATCH 3/8] Update searchBothFieldFunction --- src/components/Dropdown/index.tsx | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 9c6a599..20e3e30 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -72,6 +72,7 @@ const DropdownComponent: ( searchPlaceholderTextColor = 'gray', placeholder = 'Select item', search = false, + searchBothFields = false, maxHeight = 340, minHeight = 0, disable = false, @@ -373,6 +374,30 @@ const DropdownComponent: ( return item.indexOf(key) >= 0; }; + const searchBothFieldFunction = (e: any) => { + const item = _get(e, labelField) + ?.toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + const key = text + .toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + + const item1 = _get(e, valueField) + ?.toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + + const isLabelMatch = item.indexOf(key) >= 0; + const isValueMatch = item1.indexOf(key) >= 0; + + return isLabelMatch || isValueMatch; + }; + const propSearchFunction = (e: any) => { const labelText = _get(e, searchField || labelField); @@ -380,7 +405,7 @@ const DropdownComponent: ( }; const dataSearch = data.filter( - searchQuery ? propSearchFunction : defaultFilterFunction + searchQuery ? propSearchFunction : searchBothFields ? searchBothFieldFunction: defaultFilterFunction ); if (excludeSearchItems.length > 0 || excludeItems.length > 0) { @@ -403,6 +428,7 @@ const DropdownComponent: ( [ data, searchQuery, + searchBothFields, excludeSearchItems, excludeItems, searchField, From 5baf0584527668a8f279a7b350e6dbc6d029bcce Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Thu, 17 Oct 2024 09:17:10 +0700 Subject: [PATCH 4/8] empty result status updated "No Result Found" --- src/components/Dropdown/index.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 20e3e30..b4a69d2 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -632,6 +632,19 @@ const DropdownComponent: ( ref={refList} onScrollToIndexFailed={scrollIndex} data={listData} + ListEmptyComponent={ + + + No Result Found + + + } inverted={isTopPosition ? inverted : false} renderItem={_renderItem} keyExtractor={(_item, index) => index.toString()} From dac7465cf858d283ddc788578ba0b0ce02c56990 Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Sat, 21 Dec 2024 08:27:30 +0700 Subject: [PATCH 5/8] Update index.tsx --- src/components/Dropdown/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 9c6a599..c6d8b31 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -64,6 +64,7 @@ const DropdownComponent: ( labelField, valueField, searchField, + searchKeyboardType, value, activeColor = '#F6F7F8', fontFamily, @@ -560,6 +561,7 @@ const DropdownComponent: ( inputStyle={[inputSearchStyle, font()]} value={searchText} autoCorrect={false} + keyboardType={searchKeyboardType || 'default'} placeholder={searchPlaceholder} onChangeText={(e) => { if (onChangeText) { From ac860156841abbc337c8c3e7e58ae4409f441b6d Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Sat, 21 Dec 2024 08:29:23 +0700 Subject: [PATCH 6/8] Update model.ts --- src/components/Dropdown/model.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts index a32bba5..1a05bb5 100644 --- a/src/components/Dropdown/model.ts +++ b/src/components/Dropdown/model.ts @@ -5,6 +5,7 @@ import type { TextProps, ImageStyle, FlatListProps, + KeyboardTypeOptions, } from 'react-native'; export type IDropdownRef = { @@ -45,6 +46,7 @@ export interface DropdownProps { searchPlaceholderTextColor?: string; disable?: boolean; autoScroll?: boolean; + searchKeyboardType? : KeyboardTypeOptions | 'default'; showsVerticalScrollIndicator?: boolean; dropdownPosition?: 'auto' | 'top' | 'bottom'; flatListProps?: Omit, 'renderItem' | 'data'>; From 0e269332fd44eba4b1c0e3d20102df3c4b6c80e1 Mon Sep 17 00:00:00 2001 From: Aravind <36630532+aravind3566@users.noreply.github.com> Date: Sat, 21 Dec 2024 08:32:49 +0700 Subject: [PATCH 7/8] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 647040a..8dce9e9 100644 --- a/README.md +++ b/README.md @@ -43,9 +43,10 @@ yarn add react-native-element-dropdown | data | Array | Yes | Data is a plain array | | labelField | String | Yes | Extract the label from the data item | | valueField | String | Yes | Extract the primary key from the data item | -| searchField | String | No | Specify the field of data list you want to search | +| searchField | String | No | Specify the field of data list you want to search | +| searchKeyboardType | KeyboardTypeOptions | No | Specify the field of keyboard type list you want to use | | onChange | (item: object) => void | Yes | Selection callback | -| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | | value | Item | No | Set default value | | placeholder | String | No | The string that will be rendered before dropdown has been selected | | placeholderStyle | TextStyle | No | Styling for text placeholder | From 2b85c31e757bbd1a01f2a5eb561bbb73ffe246f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aravind=20=F0=9F=87=AE=F0=9F=87=B3?= <36630532+aravind3566@users.noreply.github.com> Date: Thu, 3 Jul 2025 13:32:06 +0700 Subject: [PATCH 8/8] Update index.tsx --- src/components/Dropdown/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index d222681..253a272 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -196,7 +196,7 @@ const DropdownComponent = React.forwardRef>( if (ref && ref?.current) { ref.current.measureInWindow((pageX, pageY, width, height) => { let isFull = isTablet - ? false + ? true : mode === 'modal' || orientation === 'LANDSCAPE'; if (mode === 'auto') {