React Native, Andoid: input loses focus when icon clicked-CodePudding

Faced an unexpected obstacle - when I click on the icon to clear the input, the focus from the input is lost and the click is not processed. This only happens on Android. IOS is fine.

const onBlurHandler = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
    onBlur && onBlur(e);
    setFocusOff();
  };

  const onFocusHandler = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
    onFocus && onFocus(e);
    setFocusOn();
  };

<TextInput
        {...inputProps}
        keyboardType={keyboardType}
        onFocus={(e) => onFocusHandler(e)}
        onBlur={(e) => onBlurHandler(e)}
        placeholderTextColor={colors.light.grayscale[300]}
        style={[lightInput.input, isFocusedStyles, isNonEditableStyles, isDisabledStyles, isErrorStyles]}
        editable={enabled}
        selectTextOnFocus={enabled}
        value={value}
      />

      {isInputFilled && !error && editable && enabled && (
        <View style={lightInput.icon}>
          <TouchableOpacity
            onPress={onInputClear}>
            <Close width={18} height={18} color={colors.light.grayscale[300]} />
          </TouchableOpacity>
        </View>
      )}

Close icon has absolut position.

I tried use e.stopPropagation() and some other tricks, but it doesn't work anyway.(

CodePudding user response：

Because your delete button is a button, it gets focused when pressed.

To solve this issue, you can simply create a reference textInputRef for your textinput and call textInputRef.current.focus() in your onInputClear function.

CodePudding user response：

Thank your for your answers. Also I found this solution:

add to ScrollView prop keyboardShouldPersistTaps='handled' Also works!