Support for the no options case

ui/app/styles/components/dropdown.scss

@@ -142,4 +142,10 @@
       }
     }
   }
+
+  .dropdown-empty {
+    display: block;
+    padding: 8px 12px;
+    color: $grey-light;
+  }
 }

ui/app/templates/components/multi-select-dropdown.hbs

@@ -28,6 +28,8 @@
             {{option.label}}
           </label>
         </li>
+      {{else}}
+        <em data-test-dropdown-empty class="dropdown-empty">No options</em>
       {{/each}}
     </ul>
   {{/dd.content}}

ui/tests/integration/multi-select-dropdown-test.js

@@ -297,3 +297,15 @@ test('pressing ESC when the options list is open closes the list and returns foc
     'The trigger has focus'
   );
 });
+
+test('when there are no list options, an empty message is shown', function(assert) {
+  const props = commonProperties();
+  props.options = [];
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  click('[data-test-dropdown-trigger]');
+  assert.ok(find('[data-test-dropdown-options]'), 'The dropdown is still shown');
+  assert.ok(find('[data-test-dropdown-empty]'), 'The empty state is shown');
+  assert.notOk(find('[data-test-dropdown-option]'), 'No options are shown');
+});