fix for #140, fix for some UI breakage, cosmetic changes

src/widgets/chip-input.jsx

@@ -23,7 +23,6 @@ export default class ChipInput extends React.Component {
 
   static deriveStateFromProps(props) {
     return {
-      placeholder: props.chips ? '' : props.prompt,
       sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),
       chipIndex: ChipInput.indexChips(props.chips)
     };
@@ -137,7 +136,7 @@ export default class ChipInput extends React.Component {
       <div className={className}>
         {chips}
         <input type="text"
-          placeholder={this.state.placeholder}
+          placeholder={this.props.prompt}
           onChange={this.handleTextInput}
           onFocus={this.handleFocusGained}
           onBlur={this.handleFocusLost}

src/widgets/contact-list.jsx

@@ -25,7 +25,7 @@ const messages = defineMessages({
   }
 });
 
-class ContactList extends React.Component {
+class ContactList extends React.PureComponent {
   render() {
     const { formatMessage } = this.props.intl;
     const showCheckmark = Array.isArray(this.props.topicSelected);
@@ -53,6 +53,8 @@ class ContactList extends React.Component {
       contactsCount ++;
     }
     if (this.props.contacts && this.props.contacts.length > 0) {
+      // Used keys to prevent duplicates when the user comes both from the 'fnd' and the list of contacts.
+      const usedKeys = {};
       this.props.contacts.forEach(c => {
         if (c.action) {
           // Action item
@@ -65,6 +67,10 @@ class ContactList extends React.Component {
         } else {
           // Normal contact
           const key = this.props.showMode ? c.user : (c.topic || c.user);
+          if (usedKeys[key]) {
+            return;
+          }
+          usedKeys[key] = true;
           // If filter function is provided, filter out the items
           // which don't satisfy the condition.
           if (this.props.filterFunc && this.props.filter) {
@@ -150,12 +156,13 @@ class ContactList extends React.Component {
         }
       }, this);
     }
-
+    /* dangerouslySetInnerHTML={{__html: this.props.emptyListMessage}} */
     return (
       <div className={this.props.noScroll ? null : "scrollable-panel"}>
         {contactsCount == 0 ?
-          <div className="center-medium-text"
-            dangerouslySetInnerHTML={{__html: this.props.emptyListMessage}} />
+          <div className="center-medium-text" style={{whiteSpace: 'pre-line'}}>
+            {this.props.emptyListMessage}
+          </div>
           :
           null
         }

src/widgets/group-manager.jsx

@@ -15,6 +15,11 @@ const messages = defineMessages({
     id: 'contacts_not_found_short',
     defaultMessage: "No contacts match ''{query}''",
     description: 'Shown in ContactsView when search returned no results'
+  },
+  add_members_prompt: {
+    id: 'add_members_prompt',
+    defaultMessage: 'add members',
+    description: 'Placeholder in group members input field'
   }
 });
 
@@ -166,7 +171,7 @@ class GroupManager extends React.Component {
             tinode={this.props.tinode}
             chips={this.state.members}
             staticMembers={this.state.staticMembers}
-            prompt="add members"
+            prompt={this.props.intl.formatMessage(messages.add_members_prompt)}
             filterFunc={this.handleContactFilter}
             onChipRemoved={this.handleMemberRemoved} />
         </div>