Using react-dadata-suggestions with Formik or react-final-form about react-dadata-suggestions

[iloveip]

Hi there,

Do you have any update on this?

[nobbynobbs]

Hello.

I think for Final Form you could use the mutators for passing values from react-dadata-suggestion event handler into final form's state. Here is an example

[iloveip]

Thank you very much for your reply! Yes, it works, but the input itself is cleared now.

[nobbynobbs]

Yes it's empty. You should somehow pass the value into the query attribute of Suggestions component. Sorry, I'm not familiar with Final Forms, so I can't help.
Also, I've just noticed the deprecation warning about mutators in my previous example, you should use form: mutators instead of mutators.

[nobbynobbs]

@iloveip
Looks like it works
Also I fix deprecation warning.

[iloveip]

Thank you very much 🙏

[iloveip]

Hi there,

I've just noticed, that if you select an address (for example, with street), and then want to add a house, the input is cleared as soon as you start typing. (If you do the same with arrows up and down in the first place, everything is ok.) Is there any way to fix it?

[nobbynobbs]

try

onChange={(event, value) => props.input.onChange({value: event})}

[iloveip]

Yes, now it works, thank you very much!

[iloveip]

I'm sorry, but I have one more question 🙏

In my example the suggestions list hides and shows on every key press as I type. Is there anyway to fix it?

[nobbynobbs]

I doubt if it's possible in current implementation.

How it works: onChange event handler set the new value for form field, then this value passed into query prop of dadata component, and this causes componentWillReceiveProps handler fired, which clears suggestions list.

I'll think how to improve this use-case.

[iloveip]

Ok, thank you very much.

[nobbynobbs]

So-so. I know how to fix your issue, but I don't know how to preserve current behavior for other cases.

[iloveip]

Could you please share your solution? Maybe I can fork your repository and fix it only for me (if other users don't have such problem).

[nobbynobbs]

something like this

diff --git a/src/index.js b/src/index.js
index a8f8b50..9d2f3e6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -74,12 +74,11 @@ class DadataSuggestions extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({
-      query: nextProps.query,
-      suggestions: [],
-      showSuggestions: false,
-      success: false,
-    });
+    const newQuery = nextProps.query;
+    const { query } = this.props;
+    if (newQuery != query) {
+      this.handleChange(newQuery);
+    }
   }
 
   componentWillUnmount() {
@@ -126,8 +125,7 @@ class DadataSuggestions extends Component {
     return searchWords;
   };
 
-  handleChange = (e) => {
-    const query = e.target.value;
+  handleChange = (query) => {
     const { deferRequestBy } = this.props;
 
     this.clearFetchTimeout();
@@ -258,7 +256,7 @@ class DadataSuggestions extends Component {
     return (
       <div className="suggestions-container">
         <QueryInput
-          onChange={ this.handleChange }
+          onChange={ e => this.handleChange(e.target.value) }
           placeholder={ this.props.placeholder }
           loading={ loading }
           query={ query }

[nobbynobbs]

I've merged #25, please check release v1.1.0.

Just add new prop receivePropsBehaveLikeOnChange={true} to dadata component in your code. There is example based on your last link from codesandbox.

Looks like it works.

upd. 😆 🤣 no, it still doesn't work. Now select event is broken 🤔

[iloveip]

Ok. So I just wait? Or I can go ahead and fix you repo as you said above?

[nobbynobbs]

@iloveip check v1.1.1 please, I hope it works. Link is the same as previous

[iloveip]

😃Thank you very much! Everything works great now!