Adds "onBlur" hook in TextInputComp onBlur prop

[sethcwhiting]

Added this hook so that consumers of this package can include "onBlur" in their textInputProps just like they would with "onFocus".

[druvisc]

Relevant

[bell-steven]

I can use onBlur in textInputProps. Am I missing something here?

    <GooglePlacesAutocomplete
        query={{
          key: GOOGLE_PLACES_API_KEY,
          language: 'en', // language of the results
        }}
        onPress={(data, details = null) => console.log(data)}
        textInputProps={{
          onBlur: () => console.log('hello'),
        }}
   />

[sethcwhiting]

@bell-steven Oh I see. I didn't realize that. As a user of the package, I'd rather use it like I use the onFocus prop, but you could leave it as is if you want, since it does the same thing. I'd just say it might be nice to at least mention that somewhere in the documentation. If you do end up wanting to merge this, I just fixed the conflict. Thanks!

[bell-steven]

How do you use the onFocus prop? In textInputProps or directly?

Very little of this library is well documented. It is an ongoing effort. PRs always welcome.

I really appreciate your taking the time to resolve the conflicts.

As an aside, as I wrote in the roadmap issue (#552) I would ideally like to see the number of props directly available from the library be drastically reduced. There are currently at least 46 props available. As an example, some of the TextInput props are exposed directly, while other need to be placed in textInputProps. We could either allow them all to be set directly on <GooglePlacesAutocomplete /> or move them all to TextInputProps.

[sethcwhiting]

Hey sorry, I just looked at my code again and I am using it the way you suggested:
textInputProps={{ onFocus: () => this.handleOnFocus(), onBlur: () => this.handleOnBlur() }}
The problem with it is that onBlur didn't allow you to hook into it like onFocus did. Instead, you could either leave it or overwrite it completely and lose the default blur behavior of the package. My change here allows you to keep the default behavior and add your own on top of it.

[bell-steven]

Thats why I am a little back and forth on whether I should merge this. On the one hand, there should be consistency between onFocus and onBlur. On the other hand, if you are overwriting the default onBlur function, not sure that hooking into the current onBlur function is something that is expected.

To solve you problem, would using a ref to call blur() in your handleOnBlur() solve your issue?

The question for me is, does blur() get called automatically? Or does it have to be called in onBlur? I have to dig into this when I have some time.

If you don't mind, I would like to leave this open for now.

[sethcwhiting]

This is the current default behavior:

  _onBlur = () => {
    this.triggerBlur();

    this.setState({
      listViewDisplayed: false
    });
  }

If you leave it so that passing the onBlur prop overwrites the default behavior, this.state.listViewDisplayed will remain true. If you don't want that to happen (like I don't), I don't know how you would prevent that the way the package is currently written.

[bell-steven]

You can use the listViewDisplayed prop for that :). (There may be a bug in this, see #398).

[sethcwhiting]

Interesting. I may have to play around with that and see if I can get it to work for me 👍 Thanks for your work on this project, btw! Glad you picked it up.

[bell-steven]

Thanks. Holler if you get stuck. I'll be happy to try and help.