skip to Main Content

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.(

2

Answers


  1. Chosen as BEST ANSWER

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

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


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search