From 70e4c8066c052e68c515cef21659e1c37965a1b3 Mon Sep 17 00:00:00 2001
From: Aleksey Druzhinin <alexey@yourtask.ru>
Date: Tue, 3 Nov 2020 10:24:06 +0500
Subject: [PATCH] remove deprecated componentWillReceiveProps, fix wrapper ref

---
 src/Chips.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/Chips.js b/src/Chips.js
index 3c78419..6785526 100644
--- a/src/Chips.js
+++ b/src/Chips.js
@@ -20,20 +20,24 @@ class Chips extends Component {
       suggestions: []
     };
 
-    this.asyncSuggestLimiter = 
+    this.asyncSuggestLimiter =
       new CallLimiter(this.callFetchSuggestions.bind(this), 1000 / props.fetchSuggestionsThrushold);
+
+    this.wrapperRef = React.createRef();
   }
 
-  componentWillReceiveProps = (nextProps) => {
-    this.asyncSuggestLimiter.interval = (1000 / nextProps.fetchSuggestionsThrushold);
+  componentDidUpdate = (prevProps) => {
+    if (this.props.fetchSuggestionsThrushold !== prevProps.fetchSuggestionsThrushold) {
+      this.asyncSuggestLimiter.interval = (1000 / this.props.fetchSuggestionsThrushold);
+    }
   }
-  
+
   onBlur = e => {
-    this.refs.wrapper.focus();
+    this.wrapperRef.current && this.wrapperRef.current.focus();
   }
 
   onFocus = e => {
-    this.refs.wrapper.blur();
+    this.wrapperRef.current && this.wrapperRef.current.blur();
   }
 
   handleKeyDown = e => {
@@ -106,17 +110,17 @@ class Chips extends Component {
 
   callFetchSuggestions = (fetchSuggestions, value, canceled) => {
     let { uniqueChips } = this.props;
-    
+
     let callback = suggestions => {
       if(!canceled.isCancaled()){
-        this.setState({ 
+        this.setState({
           loading: false,
           suggestions: (uniqueChips ? this.filterUniqueChips(suggestions) : suggestions)
         });
       }
     }
 
-    let suggestionResult = 
+    let suggestionResult =
       fetchSuggestions.call(this, value, callback);
 
     if(suggestionResult && 'then' in suggestionResult){ // To Support Promises
@@ -175,7 +179,7 @@ class Chips extends Component {
     };
 
     return (
-      <div {...themr(200, 'chipsContainer')} ref="wrapper" >
+      <div {...themr(200, 'chipsContainer')} ref={this.wrapperRef}>
         {this.renderChips()}
         <Autosuggest
           {...this.props}