diff --git a/examples/App.tsx b/examples/App.tsx index b0eac853a..7646fdc71 100644 --- a/examples/App.tsx +++ b/examples/App.tsx @@ -77,6 +77,20 @@ export default function App(): JSX.Element { description="This is the default dropdown picker - with search" dropdownProps={{searchable: true}} /> + + + + diff --git a/index.d.ts b/index.d.ts index 9a2ad4db2..e748d2276 100644 --- a/index.d.ts +++ b/index.d.ts @@ -198,6 +198,7 @@ declare module 'react-native-dropdown-picker' { customItemContainerStyle?: StyleProp; customItemLabelStyle?: StyleProp; customItemValueDelimiter?: string; + clearSearchFieldOnSelect?: boolean; disableBorderRadius?: boolean; disabledItemContainerStyle?: StyleProp; disabledItemLabelStyle?: StyleProp; diff --git a/src/components/Picker.js b/src/components/Picker.js index ab345d1d9..c8634ca0d 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -84,6 +84,7 @@ function Picker({ customItemContainerStyle = {}, customItemLabelStyle = {}, customItemValueDelimiter = '-', + clearSearchFieldOnSelect = false, disableBorderRadius = true, disabled = false, disabledItemContainerStyle = {}, @@ -349,6 +350,19 @@ function Picker({ if (mode === MODE.SIMPLE) badgeFlatListRef.current = null; }, [mode]); + /** + * clear search field on item select. + */ + useEffect(() => { + if ( + clearSearchFieldOnSelect == true && + multiple == true && + searchText.length > 0 + ) { + setSearchText(''); + } + }, [value]); + /** * onPressClose. */