fix(collapsed-participants): Resize in correct scenarios

internal_packages/composer/lib/account-contact-field.jsx

@@ -44,7 +44,7 @@ export default class AccountContactField extends React.Component {
 
   _renderAccountSpan = (label) => {
     return (
-      <span className="from-picker" style={{position: "relative", top: 13, left: "0.5em"}}>
+      <span style={{position: "relative", top: 13, left: "0.5em"}}>
         {label}
       </span>
     );

internal_packages/composer/lib/collapsed-participants.jsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import {Utils} from 'nylas-exports';
 import {InjectedComponentSet} from 'nylas-component-kit';
 
+const NUM_TO_DISPLAY_MAX = 999;
+
 export default class CollapsedParticipants extends React.Component {
   static displayName = "CollapsedParticipants";
 
@@ -21,9 +23,8 @@ export default class CollapsedParticipants extends React.Component {
 
   constructor(props = {}) {
     super(props);
-    this._keyPrefix = Utils.generateTempId();
     this.state = {
-      numToDisplay: 999,
+      numToDisplay: NUM_TO_DISPLAY_MAX,
       numRemaining: 0,
       numBccRemaining: 0,
     }
@@ -33,13 +34,15 @@ export default class CollapsedParticipants extends React.Component {
     this._setNumHiddenParticipants();
   }
 
-  componentWillReceiveProps() {
-    // Always re-evaluate the hidden participant count when the participant set changes
-    this.setState({
-      numToDisplay: 999,
-      numRemaining: 0,
-      numBccRemaining: 0,
-    });
+  componentWillReceiveProps(nextProps) {
+    if (!Utils.isEqualReact(nextProps, this.props)) {
+      // Always re-evaluate the hidden participant count when the participant set changes
+      this.setState({
+        numToDisplay: NUM_TO_DISPLAY_MAX,
+        numRemaining: 0,
+        numBccRemaining: 0,
+      });
+    }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -47,11 +50,13 @@ export default class CollapsedParticipants extends React.Component {
   }
 
   componentDidUpdate() {
-    this._setNumHiddenParticipants();
+    if (this.state.numToDisplay === NUM_TO_DISPLAY_MAX) {
+      this._setNumHiddenParticipants();
+    }
   }
 
   _setNumHiddenParticipants() {
-    const $wrap = ReactDOM.findDOMNode(this.refs.participantsWrap)
+    const $wrap = ReactDOM.findDOMNode(this.refs.participantsWrap);
     const $regulars = Array.from($wrap.getElementsByClassName("regular-contact"));
     const $bccs = Array.from($wrap.getElementsByClassName("bcc-contact"));
 
@@ -104,7 +109,7 @@ export default class CollapsedParticipants extends React.Component {
 
   _collapsedContact = (contact) => {
     const name = contact.displayName();
-    const key = this._keyPrefix + contact.email + contact.name;
+    const key = contact.email + contact.name;
 
     return (
       <span
@@ -123,7 +128,7 @@ export default class CollapsedParticipants extends React.Component {
 
   _collapsedBccContact = (contact, i) => {
     let name = contact.displayName();
-    const key = this._keyPrefix + contact.email + contact.name;
+    const key = contact.email + contact.name;
     if (i === 0) {
       name = `Bcc: ${name}`;
     }
@@ -137,7 +142,7 @@ export default class CollapsedParticipants extends React.Component {
     const bcc = this.props.bcc.map(this._collapsedBccContact);
 
     let toDisplay = contacts.concat(bcc);
-    toDisplay = toDisplay.splice(0, this.state.numToDisplay - 1);
+    toDisplay = toDisplay.splice(0, this.state.numToDisplay);
     if (toDisplay.length === 0) {
       toDisplay = "Recipients";
     }

internal_packages/composer/stylesheets/composer.less

@@ -194,7 +194,7 @@ body.platform-win32 {
 
     .num-remaining-wrap {
       position: absolute;
-      right: 0;
+      right: -3px;
       z-index: 2;
       top: 6px;
       .show-more-fade {
@@ -308,12 +308,6 @@ body.platform-win32 {
       min-height: @line-height-computed;
     }
   }
-
-  .from-picker {
-    &:hover {
-      cursor: default;
-    }
-  }
 }
 
 // Overrides for the composer in a message-list
@@ -362,6 +356,9 @@ body.platform-win32 {
     padding-top: 11px;
     vertical-align: -webkit-baseline-middle;
 
+    .primary-item, .only-item {
+      line-height: 2em;
+    }
     &:hover {
       .primary-item,
       .only-item {

static/components/button-dropdown.less

@@ -49,7 +49,6 @@
     .btn();
     cursor: default;
     color: @btn-default-text-color;
-    line-height: 2em;
   }
   .primary-item {
     border-radius: @border-radius-base 0 0 @border-radius-base;