The keyboard hides every time I type on IOS and android [Expo 52.0.7]

[Camiloadh99]

Hello, I have a problem in iOS as seen in the video every time I press a number the cell phone keyboard is hidden (is happening too on your demo code)

• IOS and android
• Expo 52.0.7
• "react-native-autocomplete-input": "5.5.2"
• "react-native": "0.76.2",

WhatsApp.Video.2024-11-18.at.3.28.46.PM.mp4

my component

import { Text } from "native-base";
import React, { useState } from "react";
import { StyleSheet, TextInput } from "react-native";
import Autocomplete from "react-native-autocomplete-input";

 <Autocomplete
      keyboardType={props.searchBy == "code" ? "numeric" : undefined}
      data={hideResults ? [] : props.data}
      value={props.value}
      onChangeText={(text) => {
        search(text);
        setHideResults(false);
      }}
      renderTextInput={(inputProps) => (
        <TextInput
          {...inputProps}
          placeholder={props.searchBy.toUpperCase()}
          placeholderTextColor="#999"
          style={styles.input}
        />
      )}
      flatListProps={{
        style: {
          width: "100%",
          margin: 0,
          maxHeight: 200,
        },
        keyboardShouldPersistTaps: "always", //? This is used when the parent have an Scroll View */
        renderItem: ({ item }: { item: any }) => (
          <Text
            style={styles.itemText}
            onPress={() => {
              handleSelect(item);
              changeHideResults(true);
            }}
          >
            <Text style={{ fontWeight: "bold" }}>Code:</Text> {item.code}{" "}
            <Text style={{ fontWeight: "bold" }}>Client:</Text> {item.client}{" "}
            <Text style={{ fontWeight: "bold" }}>City:</Text> {item.city}
          </Text>
        ),
      }}
    />

[mrlaessig]

Hey @Camiloadh99, I can confirm that this issue is happening with the latest release. Could you try using version 5.4.0 for the time being until a fix is released?

[Mihai-github]

having the same issue, tested with v5.4.0 and did not work

[Camiloadh99]

hi @mrlaessig thanks for the reply!
Yes i solved in this moment separating text input and autocomplete for ios and keep the last component for android

 <View>
      <TextInput
        keyboardType={props.searchBy == "code" ? "numeric" : undefined}
        value={props.value}
        onChangeText={(text) => {
          search(text);
          setHideResults(false);
        }}
        placeholder={`${props.searchBy.toUpperCase()}`}
        placeholderTextColor="#999"
        style={styles.input}
      />
      <Autocomplete
        keyboardType={props.searchBy == "code" ? "numeric" : undefined}
        data={hideResults ? [] : props.data}
        value={props.value}
        onChangeText={(text) => {
          search(text);
          setHideResults(false);
        }}
        renderTextInput={() => <View />}
        flatListProps={{
          style: {
            width: "100%",
            margin: 0,
            maxHeight: 200,
          },
          keyboardShouldPersistTaps: "always", //? This is used when the parent have an Scroll View */
          renderItem: ({ item }: { item: any }) => (
            <Text
              style={styles.itemText}
              onPress={() => {
                handleSelect(item);
                changeHideResults(true);
              }}
            >
              <Text style={{ fontWeight: "bold" }}>Code:</Text> {item.code} <Text style={{ fontWeight: "bold" }}>Client:</Text>{" "}
              {item.client} <Text style={{ fontWeight: "bold" }}>City:</Text> {item.city}
            </Text>
          ),
        }}
      />
    </View>

and then when i call the component on ios i put it into <View> component and for android i put in a view component with "absolute" position

it's like som elements lose their focus inside the autocomplete with new expo version

[marshal-truman]

@Camiloadh99 Your workaround helped. But now, i am not able to select any item from the list rendered by renderItem method. Did adding "absolute" solved such issue for you? If so, please share the code snippet.

[marshal-truman]

Hey @Camiloadh99, I can confirm that this issue is happening with the latest release. Could you try using version 5.4.0 for the time being until a fix is released?

Any information on when is the release for this issue is planned? This is a blocker for my team's app.

[aharbavets]

The solution provided by Camiloadh99 worked for me, however I've got another issue - on Android it became impossible to handle clicks on the items of the FlatList.
I think the additional input triggers some code which hides the FlatList. Maybe it's something in my code which did it.
Anyway for now I've ended up by re-focusing the custom input rendered inside renderTextInput, maybe it will be helpful for someone:

const inputRef = useRef<TextInput>(null)
...
return (
    ...
    <AutocompleteInput
        ...
        renderTextInput={() => {
            return (
                <TextInput
                    ref={inputRef}
                    onChangeText={text => {
                        ...
                        setTimeout(() => inputRef.current?.focus()) 
                    }}
                    ...
             />
        }
    />
    ...
)