Why my input closes when new Component is showing?

user_18281071 0
Viewed 98

I have a a Header there is a text input and I have a Main component there are the list of products of the searched text.

So If the input text is empty then I want to show him his last searched things. If he type anything then I want to show him the products with the same name as the input text. I make a condition like this:

const SearchRoot = ({ }: ISearchRoot) => {
  const searchParam = useSelector((state: RootState) => state.Search.searchParam);
  return (
    <>
      { searchParam.length > 0 ?
        <SearchList />
        :
        <LatestHistory />
      }
    </>
  )
}

So if I type anything then my input are closing automatically. But if I press again the keyboard and typing then its not closing and working. So its only happend when the component changing from <LatestHistory to <SearchList only one time. So how can I make my keyboard always open when the component is chaning ?

Search

const Search = () => {
  return (
    <View style={s.container}>
      <StatusBar backgroundColor='#fff' />
      <SearchHeader />

      <SearchRoot />
    </View>
  )
}

SearchHeader

const SearchHeader = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParams>>();
  const dispatch = useDispatch();

  // filters
  const [searchText, setSearchText] = useState<string>('');
  
  const handleChangeText = (e: string) => {
    dispatch(setSearch({searchParam: e}));
    setSearchText(e)
  };

  const handleClearText = () => {
    dispatch(setSearch({searchParam: ''}));
    setSearchText('');
  };

  const handlePressSeach = () => {
    searchText.length > 0 &&
      navigation.navigate('Searched', {
        searchText,
        searchType: tabType
      });
  };

  const handleGoBack = () => navigation.goBack();
  return (
    <View style={s.container}>
      <View style={s.header}>
        <View style={s.backContainer}>
          <GoBackIcon
            onPress={handleGoBack}
            color='#555'
          />
        </View>
        <View style={s.inputContainer}>
          <SearchInput
            value={searchText}
            onChangeText={handleChangeText}
            onPressSearched={handlePressSeach}
            onPressClearTextField={handleClearText}
            autoFocus={true}
            style={s.sInput}
          />
        </View>
      </View>
    </View>
  )
}

SearchRoot

const SearchRoot = ({ }: ISearchRoot) => {
  const searchParam = useSelector((state: RootState) => state.Search.searchParam);
  return (
    <>
      { searchParam.length > 0 ?
        <SearchMain />
        :
        <Text>Vorschläge</Text>
      }
    </>
  )
}

I am very thankful for your help!!

expo react-native
2 Answers

I just read your problem statement and matched it with your Code.

✦First of all your sequence is wrong.

✦First Comes the Previous Searched Result.

✦Then when you press it then it should clear the previous search result.

✦Then On text change Property

✦Then OnPress Searched

Maybe that's Why it closes. If that's Not the case then!

(In my Opinion) when then you click the search bar the previously searched result disappears and this is done by the function handleClearText. Now When the Function Completes it's Functionality the search bar closes. The Second time you open the search bar it works as their's no Previous Search result to clear.

So the Problem is with the handleClearText function.

My Proposed Solution in case 2 is

We can call the search method again (at the end) of handleClearText function. then it will re open the search bar with the new state.

I hope it resolves your issue, Regards...

user_193468630

first of all const [searchText, setSearchText] = useState(''); this whole logic move to parent class search and from there pass it to siblings to avoid any confusion.whenever re-rendering happens values will be passed correctly to child.I think somewhere that is going wrong.Either use state and prop drilling or store, dont mix it up.

user_129031650
Related