title: Edit a cell and keep the editing status when losing focus in ui-grid 3.0
body: <p>My starting point is this <a href="http://plnkr.co/edit/zm2snCK2A7GkEXXmWvZc?p=preview" rel="nofollow">Plunker</a>, that contains a table made with AngularJS and UI-Grid 3.0. When I double-click on a cell with a template (let's take as an example the gender one), a select element is visible as it enters in edit mode.</p>
  
  <p>But when this cell loses the focus (i.e. clicking outside the table or on another cell), the select element disapears and the cell goes back to the previous state.</p>
  
  <p>Even though that is the default thing to do and the usual one, I'd like to keep the edit mode of each cell no matter if the focus is lost, and go back to the fixed mode only when an option is selected. I need to be able to keep one or more cells in this edit mode at the same time.</p>
  
  <p>Also It'd be great if the gender field in the JSON array could be in a "intermediate" state while in edit mode (it could be the current third item "both" or anything else) and change to "male" or "female" once an option is selected.</p>
  
  <p>The current code is the following:</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div ng-controller="MainCtrl"&gt;
      &lt;div ui-grid="gridOptions" ui-grid-edit class="grid"&gt;&lt;/div&gt;
      &lt;hr&gt;{{gridOptions.data | json}}
    &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit']);
  
  app.controller('MainCtrl', ['$scope', '$http',
    function($scope, $http) {
  
      $scope.genderTypes = [{
        ID: 1,
        type: 'female'
      }, {
        ID: 2,
        type: 'male'
      }, {
        ID: 3,
        type: 'both'
      }];
  
      $scope.gridOptions = {
        enableSorting: true,
        enableFiltering: true,
        enableCellEditOnFocus: true,
        columnDefs: [{
          field: 'name',
          sort: {
            direction: 'desc',
            priority: 1
          }
        }, {
          field: 'gender',
          editType: 'dropdown',
          enableCellEdit: true,
          editableCellTemplate: 'ui-grid/dropdownEditor',
          editDropdownOptionsArray: $scope.genderTypes,
          editDropdownIdLabel: 'type',
          editDropdownValueLabel: 'type'
        }, {
          field: 'company',
          enableSorting: false
        }]
      };
  
      $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
        .success(function(data) {
          $scope.gridOptions.data = data;
        });
  
    }
  ]);
  </code></pre>