From c9ee3e27de846184c394911abc3335a1c13cebd4 Mon Sep 17 00:00:00 2001
From: Emiya0306 <worfandsheep@gmail.com>
Date: Mon, 29 Apr 2019 18:41:14 +0800
Subject: [PATCH] #972, fix Multiple Select option order problem / remote
 Multiple Select value bind problem

---
 site/docs/en-US/select.md | 75 ++++++++++++++++++++++++++++++++------
 site/docs/zh-CN/select.md | 76 +++++++++++++++++++++++++++++++++------
 src/select/Select.jsx     | 23 ++++++++----
 3 files changed, 147 insertions(+), 27 deletions(-)

diff --git a/site/docs/en-US/select.md b/site/docs/en-US/select.md
index e1a335483..c30331c71 100644
--- a/site/docs/en-US/select.md
+++ b/site/docs/en-US/select.md
@@ -29,11 +29,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -73,11 +79,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} disabled={el.disabled} />
@@ -117,11 +129,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} disabled={true}>
+    <Select value={this.state.value} disabled={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -161,11 +179,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} clearable={true}>
+    <Select value={this.state.value} clearable={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -205,11 +229,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} multiple={true}>
+    <Select value={this.state.value} multiple={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -253,11 +283,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.cities.map(el => {
           return (
@@ -312,11 +348,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.options.map(group => {
           return (
@@ -369,11 +411,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} filterable={true}>
+    <Select value={this.state.value} filterable={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -396,10 +444,17 @@ constructor(props) {
   super(props);
 
   this.state = {
+    value: [],
     options: [],
     states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware",   "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
     "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-  }
+  };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 onSearch(query) {
@@ -427,7 +482,7 @@ onSearch(query) {
 
 render() {
   return (
-    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading}>
+    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
diff --git a/site/docs/zh-CN/select.md b/site/docs/zh-CN/select.md
index 9a97658b8..5655bce4b 100644
--- a/site/docs/zh-CN/select.md
+++ b/site/docs/zh-CN/select.md
@@ -30,10 +30,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
 }
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
+}
+
 render() {
   return (
-      <Select value={this.state.value} placeholder="请选择">
+      <Select value={this.state.value} placeholder="请选择" onChange={this.handleInput}>
         {
           this.state.options.map(el => {
             return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -72,11 +79,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} disabled={el.disabled} />
@@ -116,11 +129,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} disabled={true}>
+    <Select value={this.state.value} disabled={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -160,11 +179,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} clearable={true}>
+    <Select value={this.state.value} clearable={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -204,11 +229,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} multiple={true}>
+    <Select value={this.state.value} multiple={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -251,11 +282,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.cities.map(el => {
           return (
@@ -309,11 +346,17 @@ constructor(props) {
     }],
     value: ''
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value}>
+    <Select value={this.state.value} onChange={this.handleInput}>
       {
         this.state.options.map(group => {
           return (
@@ -366,11 +409,17 @@ constructor(props) {
     }],
     value: []
   };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 render() {
   return (
-    <Select value={this.state.value} filterable={true}>
+    <Select value={this.state.value} filterable={true} multiple={true} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
@@ -392,10 +441,17 @@ constructor(props) {
   super(props);
 
   this.state = {
+    value: [],
     options: [],
     states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware",   "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
     "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-  }
+  };
+  this.handleInput = this.handleInput.bind(this);
+}
+
+handleInput(value) {
+  this.setState({ value });
+  console.log(value);
 }
 
 onSearch(query) {
@@ -423,7 +479,7 @@ onSearch(query) {
 
 render() {
   return (
-    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading}>
+    <Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading} onChange={this.handleInput}>
       {
         this.state.options.map(el => {
           return <Select.Option key={el.value} label={el.label} value={el.value} />
diff --git a/src/select/Select.jsx b/src/select/Select.jsx
index 607e504f5..b3a48c1fa 100644
--- a/src/select/Select.jsx
+++ b/src/select/Select.jsx
@@ -168,15 +168,24 @@ class Select extends Component {
   }
 
   handleValueChange() {
-    const { multiple } = this.props;
-    const { value, options } = this.state;
+    const { multiple, remote } = this.props;
+    const { value, options, selected: oldSelected } = this.state;
 
     if (multiple && Array.isArray(value)) {
-      this.setState({
-        selected: options.reduce((prev, curr) => {
-          return value.indexOf(curr.props.value) > -1 ? prev.concat(curr) : prev;
-        }, [])
-      }, () => {
+      const currentSelected = value.reduce((selecteds, selectedValue) => {
+        const currOption = options.find(option => option.props.value === selectedValue);
+        return currOption ? [...selecteds, currOption] : selecteds;
+      }, []);
+
+      const otherSelected = oldSelected.filter((item) => {
+        const isDuplicateSelected = !!currentSelected.find(selected => item.props.value === selected.props.value);
+        const isDeletedSelected = !value.find(selectedValue => item.props.value === selectedValue);
+        return !isDuplicateSelected && !isDeletedSelected;
+      });
+
+      const selected = !remote ? currentSelected : [...otherSelected, ...currentSelected];
+
+      this.setState({ selected }, () => {
         this.onSelectedChange(this.state.selected, false);
       });
     } else {