Add activateFirstOption input to material dropdown select.

PiperOrigin-RevId: 220513954

Author: cissyshi

angular_components/lib/material_select/material_dropdown_select.dart

@@ -157,6 +157,11 @@ class MaterialDropdownSelectComponent<T> extends MaterialSelectBase<T>
   // Whether a custom label render is used.
   bool get hasCustomLabelRenderer => labelFactory != null;
 
+  /// Whether to activate (visually focus but not select) the first available
+  /// option when the dropdown opens.
+  @Input()
+  bool activateFirstOption = false;
+
   /// CSS classes from the root element, passed to the popup to allow scoping of
   /// mixins.
   ///
@@ -348,6 +353,9 @@ class MaterialDropdownSelectComponent<T> extends MaterialSelectBase<T>
       // item.
       activeModel.activate(selection.selectedValues.first);
     }
+    if (activateFirstOption && activeModel.activeItem == null) {
+      activeModel.activateFirst();
+    }
   }
 
   void _handleNavigationKey(KeyboardEvent event, Function activateFunction) {

examples/material_select_example/lib/material_dropdown_select_full_demo.html

@@ -141,6 +141,7 @@ <h3>Multiple Selection w/ searchbox</h3>
       [selection]="multiSelectModel"
       [itemRenderer]="itemRenderer"
       [listAutoFocus]="false"
+      [activateFirstOption]="true"
       (visibleChange)="onDropdownVisibleChange($event)">
     <div header>
       <material-select-searchbox