From 9df3882e0052510b8c39e5a1cd69d5fc93b6753d Mon Sep 17 00:00:00 2001
From: Boorj <szcd@ngs.ru>
Date: Mon, 12 Sep 2016 00:24:31 +0700
Subject: [PATCH 1/4] Option elements shouldn't have keys, based on index

Keys in options shouldn't depend on key index here : https://github.com/rkit/react-select2-wrapper/blob/master/src/components/Select2.js#L159
```jsx
/* This */
return (<option key={`option-${k}`} value={id} {...itemParams}>{text}</option>);
/* should be changed to this: */
return (<option key={`option-${id}`} value={id} {...itemParams}>{text}</option>);
```
Otherwise it doesn't re-render options, when options list is changed.
---
 src/components/Select2.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Select2.js b/src/components/Select2.js
index a7976a7d..60d0d054 100644
--- a/src/components/Select2.js
+++ b/src/components/Select2.js
@@ -156,7 +156,8 @@ export default class Select2 extends Component {
   makeOption(item, k) {
     if (this.isObject(item)) {
       const { id, text, ...itemParams } = item;
-      return (<option key={`option-${k}`} value={id} {...itemParams}>{text}</option>);
+      const sanitized_id = id + '';
+      return (<option key={`option-${sanitized_id}`} value={id} {...itemParams}>{text}</option>);
     }
 
     return (<option key={`option-${k}`} value={item}>{item}</option>);

From d26c03328fb2e2968faf901415cf4f2b47eea8d8 Mon Sep 17 00:00:00 2001
From: Boorj <szcd@ngs.ru>
Date: Tue, 13 Sep 2016 18:44:13 +0700
Subject: [PATCH 2/4] normal key

Also we have to provide an ability use several options with same IDs, which is prohibited by react, but not strictly prohibited by select.
so, best solution seems to be
```js
      const key = 'option-' + k + '-' + id;
      return (<option key={key} value={id} {...itemParams}>{text}</option>);
```
And about sanitizing: was not sure, if react could use _any_ string as a key. Had to [check](https://facebook.github.io/react/docs/reconciliation.html#keys)
So now it seems to solve the problem
---
 src/components/Select2.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Select2.js b/src/components/Select2.js
index 60d0d054..1ae2074b 100644
--- a/src/components/Select2.js
+++ b/src/components/Select2.js
@@ -156,8 +156,8 @@ export default class Select2 extends Component {
   makeOption(item, k) {
     if (this.isObject(item)) {
       const { id, text, ...itemParams } = item;
-      const sanitized_id = id + '';
-      return (<option key={`option-${sanitized_id}`} value={id} {...itemParams}>{text}</option>);
+      const key = 'option-' + k + '-' + id;
+      return (<option key={key} value={id} {...itemParams}>{text}</option>);
     }
 
     return (<option key={`option-${k}`} value={item}>{item}</option>);

From f30cbe9681d654194173213495e761e8f75885aa Mon Sep 17 00:00:00 2001
From: Boorj <szcd@ngs.ru>
Date: Fri, 16 Sep 2016 12:47:52 +0700
Subject: [PATCH 3/4] removed const key

Is it better?
---
 src/components/Select2.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Select2.js b/src/components/Select2.js
index 1ae2074b..2019a2ec 100644
--- a/src/components/Select2.js
+++ b/src/components/Select2.js
@@ -156,8 +156,7 @@ export default class Select2 extends Component {
   makeOption(item, k) {
     if (this.isObject(item)) {
       const { id, text, ...itemParams } = item;
-      const key = 'option-' + k + '-' + id;
-      return (<option key={key} value={id} {...itemParams}>{text}</option>);
+      return (<option key={`option-${k}-${id}`} value={id} {...itemParams}>{text}</option>);
     }
 
     return (<option key={`option-${k}`} value={item}>{item}</option>);

From ae572adfb3a3035e55413c7ea97c75e0d9903bea Mon Sep 17 00:00:00 2001
From: Boorj <szcd@ngs.ru>
Date: Sun, 16 Oct 2016 13:54:35 +0700
Subject: [PATCH 4/4] leaved option-${id}

that should work fine
---
 src/components/Select2.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select2.js b/src/components/Select2.js
index 2019a2ec..fffeb711 100644
--- a/src/components/Select2.js
+++ b/src/components/Select2.js
@@ -156,7 +156,7 @@ export default class Select2 extends Component {
   makeOption(item, k) {
     if (this.isObject(item)) {
       const { id, text, ...itemParams } = item;
-      return (<option key={`option-${k}-${id}`} value={id} {...itemParams}>{text}</option>);
+      return (<option key={`option-${id}`} value={id} {...itemParams}>{text}</option>);
     }
 
     return (<option key={`option-${k}`} value={item}>{item}</option>);