Focus custom md-checkbox in md-select control

Question

I have implemented select control with select all option, When I open the control, it focuses on the first option. I would like to focus on the select option or at least disable the focus.

HTML

<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" >
    <md-select md-selected-text="selectedText" ng-model="selectedToppings"  multiple>   
     <div class="select-all-div" >
          <md-checkbox  class="select-selectAll"
                       >Select all</md-checkbox > </div>
        <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
    </md-select>

JS

   angular
.module('selectDemoOptGroups', ['ngMaterial'])
.controller('SelectOptGroupController', function($scope) {

  $scope.toppings = [
    { category: 'meat', name: 'Pepperoni' },
    { category: 'meat', name: 'Sausage' },
    { category: 'meat', name: 'Ground Beef' },
    { category: 'meat', name: 'Bacon' },
    { category: 'veg', name: 'Mushrooms' },
    { category: 'veg', name: 'Onion' },
    { category: 'veg', name: 'Green Pepper' },
    { category: 'veg', name: 'Green Olives' }
  ];
  $scope.selectedToppings = [];


});

https://jsfiddle.net/AlexLavriv/ya6eu8kz/5/

Answer 1

Working Demo

Try this below way

   angular
    .module('selectDemoOptGroups', ['ngMaterial'])
    .controller('SelectOptGroupController', function($scope) {

      $scope.toppings = [     
        { category: 'meat', name: 'Pepperoni' },
        { category: 'meat', name: 'Sausage' },
        { category: 'meat', name: 'Ground Beef' },
        { category: 'meat', name: 'Bacon' },
        { category: 'veg', name: 'Mushrooms' },
        { category: 'veg', name: 'Onion' },
        { category: 'veg', name: 'Green Pepper' },
        { category: 'veg', name: 'Green Olives' }
      ];
      $scope.toppings.unshift( { category: 'select', name: 'Select all' })
      $scope.selectedText = $scope.toppings[0].name;
       
   
    });

.select-selectAll{
text-align: left;
     padding-left: 10px;  
    /* padding-right: 16px; */
    display: flex;
    cursor: pointer;
    position: relative !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 95%;
    -webkit-transition: background .15s linear;
    transition: background .15s linear;
    /* padding: 0 16px; */
    height: 48px;
}


.select-selectAll div.md-icon{
    left:10px;
}



    .select-all-div:hover{
    background: rgb(238,238,238);
    }

<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" >
        <md-select md-selected-text="selectedText" ng-model="selectedToppings"  multiple>          
            <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
        </md-select>
</div>

Answer 2

You can't use a div for single opotion and options for the rest. You can use the same option to display the option select all.

<md-select>
  <md-option>Select all</md-option>
  <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
</md-select>

Working Demo: JSFiDDLE