onBlur don't work in text input react native

user_17549700 0
Viewed 630

Im trying to detect when user click outside the input, but feel like it only work with onFocus but it onBlur don't do anything, here is the simple code

/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {
  TouchableWithoutFeedback,
  TextInput,
  View,
  SafeAreaView,
} from 'react-native';

const TextInputTest = () => {
  const [isBorder, setBorder] = useState(false);
  return (
    <SafeAreaView
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View style={{borderWidth: isBorder ? 1 : 0}}>
        <TextInput
          placeholder="sometext"
          onFocus={() => setBorder(!isBorder)}
          onBlur={() => setBorder(!isBorder)}
        />
      </View>
    </SafeAreaView>
  );
};
export default TextInputTest;

I can only see the border turn black and it never blank again, what happen, please help, thank you a lots

enter image description here

react-native reactjs
1 Answers

onBlur event will be triggered when you focus out your TextInput. In this case, you have only one TextInput and you cant focus out to somewhere else as an action. Try to have 2 TextInput instead or define some actions such as an button then when you click on another TextInput or Button, onBlur will be called.

user_107416950
Related