Merge pull request #21100 from steveck-chung/bug-1021513

Bug 1021513 - [Messages] Recipients list container scroll up automatically when dragging down. r=azasypkin

apps/sms/js/recipients.js

@@ -660,7 +660,7 @@
 
     // Once the transition has ended, the set focus to
     // the last child element in the recipients list view
-    view.inner.parentNode.addEventListener('transitionend', function te() {
+    view.outer.addEventListener('transitionend', function te() {
       var last = view.inner.lastElementChild;
       var previous;
 
@@ -677,9 +677,7 @@
         if (opts.refocus) {
           opts.refocus.focus();
         }
-      }
-
-      if (last !== null) {
+      } else if (state.visible === 'multiline' && last !== null) {
         last.scrollIntoView(true);
       }
 

apps/sms/test/unit/recipients_test.js

@@ -818,7 +818,7 @@ suite('Recipients', function() {
         this.sinon.stub(Navigation, 'isCurrentPanel').returns(false);
         Navigation.isCurrentPanel.withArgs('composer').returns(true);
 
-        outer = document.getElementById('messages-recipients-list-container');
+        outer = document.getElementById('messages-to-field');
         inner = document.getElementById('messages-recipients-list');
         target = document.createElement('input');
         visible = Recipients.View.prototype.visible;
@@ -832,13 +832,13 @@ suite('Recipients', function() {
 
         test('singleline ', function() {
           // Assert the last state is multiline
-          assert.equal(visible.args[0][0], 'multiline');
+          sinon.assert.calledWith(visible, 'multiline');
+          visible.reset();
 
           // Next, set back to singleline
           recipients.visible('singleline');
 
-          assert.ok(visible.called);
-          assert.equal(visible.args[1][0], 'singleline');
+          sinon.assert.calledWith(visible, 'singleline');
         });
 
         test('singleline + refocus (with recipients) ', function() {
@@ -848,7 +848,8 @@ suite('Recipients', function() {
           recipients.add(fixture);
 
           // Assert the last state is multiline
-          assert.equal(visible.args[0][0], 'multiline');
+          sinon.assert.calledWith(visible, 'multiline');
+          visible.reset();
 
           recipients.visible('singleline', {
             refocus: target
@@ -861,21 +862,20 @@ suite('Recipients', function() {
           var last = inner.lastElementChild;
 
           assert.ok(target.focus.called);
-          assert.ok(visible.called);
-          assert.equal(visible.args[1][0], 'singleline');
-          assert.deepEqual(visible.args[1][1], {
+          sinon.assert.calledWith(visible, 'singleline', {
             refocus: target
           });
 
-          assert.ok(last.scrollIntoView.called);
+          sinon.assert.notCalled(last.scrollIntoView);
         });
 
         test('singleline + refocus (no recipients) ', function() {
           // Clear the spy intel
           target.focus.reset();
 
           // Assert the last state is multiline
-          assert.equal(visible.args[0][0], 'multiline');
+          sinon.assert.calledWith(visible, 'multiline');
+          visible.reset();
 
           recipients.visible('singleline', {
             refocus: target
@@ -886,9 +886,7 @@ suite('Recipients', function() {
           );
 
           assert.ok(target.focus.called);
-          assert.ok(visible.called);
-          assert.equal(visible.args[1][0], 'singleline');
-          assert.deepEqual(visible.args[1][1], {
+          sinon.assert.calledWith(visible, 'singleline', {
             refocus: target
           });
         });
@@ -901,13 +899,22 @@ suite('Recipients', function() {
 
         test('multiline ', function() {
           // Assert the last state is singleline
-          assert.equal(visible.args[0][0], 'singleline');
+          sinon.assert.calledWith(visible, 'singleline');
+          visible.reset();
+
+          recipients.add(fixture);
 
           // Next, set back to multiline
           recipients.visible('multiline');
 
-          assert.ok(visible.called);
-          assert.equal(visible.args[1][0], 'multiline');
+          outer.dispatchEvent(
+            new CustomEvent('transitionend')
+          );
+
+          var last = inner.lastElementChild;
+
+          sinon.assert.calledWith(visible, 'multiline');
+          sinon.assert.called(last.scrollIntoView);
         });
       });
     });