fix bug -- update in The To dropdown list should be supported keyboard operation (#143)

* update in The To dropdown list should be supported keyboard operation

* remove items judgement from contactdropdownlist to recipientinput

* remove items judgement from contactdropdownlist to recipientinput

* fix bug that selectedcontactindex will be bigger than relatedContactList.length

Author: sophiewu2333

src/components/ContactDropdownList/index.js

@@ -47,11 +47,7 @@ ContactItem.propTypes = {
 };
 
 function ContactDropdownList(props) {
-  let items = props.items;
-  // MAX 5
-  if (items.length > 5) {
-    items = items.slice(0, 5);
-  }
+  const items = props.items;
   let listClassName = null;
   let hiddenClassName = null;
   if (items.length === 0 || !props.visibility) {
@@ -93,8 +89,8 @@ ContactDropdownList.propTypes = {
   })).isRequired,
   formatContactPhone: PropTypes.func.isRequired,
   addToRecipients: PropTypes.func.isRequired,
-  active: PropTypes.bool.isRequired,
   setSelectedIndex: PropTypes.func.isRequired,
+  selectedIndex: PropTypes.number.isRequired,
 };
 
 ContactDropdownList.defaultProps = {

src/components/MessageList/index.js

@@ -24,7 +24,7 @@ export default class MessageList extends Component {
       const totalScrollHeight = this.messagesListBody.scrollHeight;
       const clientHeight = this.messagesListBody.clientHeight;
       currentScrollHeight = this.messagesListBody.scrollTop;
-      // loadNextPageMessages if srroll near buttom
+      // loadNextPageMessages if scroll near buttom
       if (
         (totalScrollHeight - lastScrollHeight) > (clientHeight + 10) &&
         (totalScrollHeight - currentScrollHeight) <= (clientHeight + 10)

src/components/RecipientsInput/index.js

@@ -81,7 +81,9 @@ class RecipientsInput extends Component {
     };
 
     this.addSelectedContactIndex = () => {
-      if (this.state.selectedContactIndex >= (this.props.searchContactList.length - 1)) {
+      const length = this.props.searchContactList.length < 5 ?
+                      this.props.searchContactList.length : 5;
+      if (this.state.selectedContactIndex >= (length - 1)) {
         this.setState({
           selectedContactIndex: 0,
         });
@@ -93,14 +95,16 @@ class RecipientsInput extends Component {
     };
 
     this.reduceSelectedContactIndex = () => {
-      if (this.state.selectedContactIndex >= (this.props.searchContactList.length - 1)) {
-        this.setState({
-          selectedContactIndex: (this.props.searchContactList.length - 1),
-        });
-      } else {
+      const length = this.props.searchContactList.length < 5 ?
+                      this.props.searchContactList.length : 5;
+      if (this.state.selectedContactIndex > 0) {
         this.setState(preState => ({
           selectedContactIndex: (preState.selectedContactIndex - 1),
         }));
+      } else {
+        this.setState({
+          selectedContactIndex: (length - 1),
+        });
       }
     };
 
@@ -121,8 +125,12 @@ class RecipientsInput extends Component {
         if (this.props.value.length === 0) {
           return;
         }
-        const relatedContactList = this.props.value.length >= 3 ?
+        let relatedContactList = this.props.value.length >= 3 ?
           this.props.searchContactList : [];
+        // MAX 5
+        if (relatedContactList.length > 5) {
+          relatedContactList = relatedContactList.slice(0, 5);
+        }
         const currentSelected
           = relatedContactList[this.state.selectedContactIndex];
         if (currentSelected) {
@@ -143,12 +151,17 @@ class RecipientsInput extends Component {
   }
 
   render() {
-    const relatedContactList = this.props.value.length >= 3 ?
+    let relatedContactList = this.props.value.length >= 3 ?
       this.props.searchContactList : [];
     const label = this.props.label ?
       (
         <label>{this.props.label}</label>
       ) : null;
+    // MAX 5
+    if (relatedContactList.length > 5) {
+      relatedContactList = relatedContactList.slice(0, 5);
+    }
+
     return (
       <div className={styles.container} onKeyDown={this.handleHotKey}>
         {label}