title: Using typeahead in AngularJS UI-grid with cellNav
body: <p>I have an Angular-UI grid defined with <code>ui-grid-cellNav</code> to allow editing cells when single-clicked, along with a custom template to display an Angular-UI Bootstrap typeahead to a particular column as below:</p>
  
  <p><strong>index.html:</strong>
  </p>
  
  <pre><code>&lt;head&gt;
    &lt;script type="text/ng-template" id="TypeaheadTemplate.html"&gt;
        &lt;div style="height:100%"&gt;
          &lt;input ng-class="'colt' + col.uid" type="text" class="typeahead form-control" ng-model="MODEL_COL_FIELD"
             uib-typeahead="name as item.name for item in grid.appScope.items | filter:$viewValue"
             typeahead-editable="false"
             typeahead-on-select="grid.appScope.typeaheadSelected(row.entity, $item)"&gt;&lt;/input&gt;
         &lt;/div&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
      &lt;div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.items = [
      {
        id: 1,
        name: "Item 1",
        description: "Example Item #1"
      },
      {
       id: 2,
       name: "Item 2",
       description: "Example Item #2"
      }];
  
      $scope.data = [{}, {}, {}]
  
      $scope.columns = [
        {
          displayName: "Item",
          field: "item.name",
          editableCellTemplate: "TypeaheadTemplate.html",
          cellTemplate: "TypeaheadTemplate.html",
          enableCellEdit: true,
          enableCellEditOnFocus: true
        },
        {
          displayName: "Note",
          name: "activityId",
          enableCellEdit: true,
          enableCellEditOnFocus: true
        }]
  
      $scope.gridOptions = {
        data: $scope.data,
        enableRowSelection: false,
        showColumnFooter: true,
        multiSelect: false,
        enableSorting: false,
        enableFiltering: false,
        gridMenuShowHideColumns: false,
        enableColumnMenus: false,
        enableCellEditOnFocus: true,
        minRowsToShow: 4,
        columnDefs: $scope.columns
      };
  
      $scope.typeaheadSelected = function(entity, selectedItem) {
        entity.item = selectedItem;
      }
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/GS2eCJ0wy0jCe8BdFPvd?p=preview" rel="nofollow noreferrer">Example Plunker</a></p>
  
  <p>This works well enough, with <code>ui-grid-cellNav</code> allowing single-click editing on the Notes column and the typeahead functioning in the Items column. However, initially clicking a typeahead textbox in the grid blurs the textbox until it's clicked again, and keeping a cell in Notes selected (but not editable) will often prevent the textbox from being selected. So, while it's functional, it's got some usability issues.</p>
  
  <p>I've already tried manually applying the class to the textbox by using the <code>ng-class</code> attribute, thinking there was some logic behind-the-scenes which focused elements with this class, but to no avail. I also can't find anything in the API documentation which suggests being able to override cellNav behaviour for a given column. Removing the <code>ui-grid-cellNav</code> directive fixes typeahead focusing, but also breaks single-click editing.</p>
  
  <p>Is there any way to make typeaheads in an Angular-UI grid play nicely with <code>ui-grid-cellNav</code>?</p>