Update TextInput.js

[StephenTANM]

Fix for onFocus & onBlur silently failing. Reproduction example below...

import { TextInput } from "@shoutem/ui";

interface InitialState {
  focused: Boolean;
}
const textInput = React.createRef();

const Input = (props: any) => {

const [state, setstate] = useState<InitialState>({
    focused: false,
  });

  const onFocus = () => {
    setstate((oldstate) => ({
      ...state,
      focused: true,
    }));
  };

  const onBlur = () => {
    setstate((oldstate) => ({
      ...state,
      focused: false,
    }));
  };

  return (
    <TextInput
      onFocus={onFocus}
      onBlur={onBlur}
      autoFocus
    />
}

[Definitely-Not-Vlad]

Great thinking, somehow it didn't occur to me that people would want to include their own specific onFocus and onBlur. Just an oversight.

[Definitely-Not-Vlad]

Destructure onBlur from this.props on the first line of the method with a fallback to null if it isn't set. This should be followed by a newline. Then check if onBlur is truthy and run it:

handleBlur() {
  const { onBlur = null } = this.props;

  this.setState({ isFocused: false });
  if (onBlur) {
    onBlur();
  }
}

[Definitely-Not-Vlad]

Destructure onFocus from this.props on the first line of the method with a fallback to null if it isn't set. This should be followed by a newline. Then check if onFocus is truthy and run it:

handleFocus() {
  const { onFocus = null } = this.props;

  this.setState({ isFocused: true });
  if (onFocus) {
    onFocus();
  }
}

[Definitely-Not-Vlad]

Reintroduce this newline between handleFocus and render, we separate all methods with a newline.