React-native-gifted-chat: onInputTextChanged is triggered without typing after the componentDidMount()

[mafiusu]

Issue Description

The onInputTextChanged is triggered automatic when the chat view is loaded after componentDidMount( ). I need the onInputTextChanged to display that a user is currently writing to the chat. But always when a users enters a chat the method is fired automatic and it displays that someone is currently writing.

Steps to Reproduce / Code Snippets

this.onTyping = this.onTyping.bind(this);
onInputTextChanged={this.onTyping}

Expected Results

onInputTextChanged only fires when a user is currently writing.

Additional Information

• React Native version: 0.49.5
• react-native-gifted-chat version: [email protected]
• Platform(s) (iOS, Android, or both?): both

[Prajna12]

Where should this code snippet be written? Adding it within GiftedChat tag is giving me errors

[mcmar]

This bug is affecting me too. In my case, I am updating text with this.setState in my componentDidMount and this is immediately overwriting it with the previous version of my text. That's because React calls componentDidMount on parents before children and also because all of the componentDidMount are called before this.setState takes effect (this may change w/ async rendering in React 17+).
I now have to differentiate this initial "fake" onInputTextChanged from "real" onInputTextChanged events. There's really no reason to call onInputTextChanged inside componentDidMount.

[Huzaifaak]

Any solution to this issue? onInputTextChanged is being called automatically after component did mount clearing the data in my state. :/

[flashimxd]

The same here...

[Huzaifaak]

I made this custom logic for this:
this.state = {
isFirstTime:true,
request:this.props.message
};

setCustomText =(Text)=>{

  if(Text == '' && !this.state.isFirstTime){
    this.setState({request:Text})
  }if(Text == '' && this.state.isFirstTime){
    this.setState({isFirstTime:false})
  }if(Text !== '' && !this.state.isFirstTime){
    this.setState({request:Text})
  }
}

In OnTextChangedText:
text={this.state.request}
onInputTextChanged={text => this.setCustomText(text)}
messages={this.state.messages}
onSend={this.onSend}
renderAvatar ={null}
user={{
_id: 1,
}}
/>
In my case it was clearing the pre-written text that I passed as props so I created this custom logic.

[MylesCaley]

Having same issue, slightly different workaround. We have a throttle in place because this is what we are using to notify the server that a user is responding.

render()

...

// this.workaround638 just sets the state for isTypingFirstTime to false.
const typingCallback = this.state.isTypingFirstTime
      ? this.workaround638
      : _.throttle(this.props.typing, 5000, { leading: true });

return (
      <View style={{ backgroundColor: "white", height: "100%", width: "100%" }}>
        <GiftedChat
          onInputTextChanged={typingCallback}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marcin03]

I resolved this by modifying @Huzaifaak method:

constructor(props) {
super(props);
this.state = {isFirstInputTextUpdate:true};
}

firstInputTextUpdate = () => {
this.setState({isFirstInputTextUpdate:false})
}

and in GiftedChat component:

<GiftedChat
onInputTextChanged = {isFirstInputTextUpdate ? this.firstInputTextUpdate : inputText=>updateInputText(inputText)}
//...other props
/>

[inrecovery]

A clean solution that has worked well for us is to declare an isTyping state that defaults to false. Following this example you can keep logic outside of the render:

const [isTyping, setIsTyping] = useState(false);

Your handler could look something like this:

const onTypingHandler = () => {
    setIsTyping(true);

    isTyping 
      ? startTyping() 
      : endTyping()

    ...the rest the method / reset state ...
 };

And you just call your handler within GiftedChat

<GiftedChat onInputTextChanged={onTypingHandler} ... />