typeahead-focus-first=false option to prevent first match from being focused

[wkonkel]

Fixes #908.

Should be 100% backwards compatible with existing markup and functionality.

Current functionality (first result is automatically focused as you type):
<input typeahead="..." />

New functionality (first result is NOT automatically focused as you type):
<input typeahead="..." typeahead-focus-first="false" />

[chrisirhc]

I think it's safer and more consistent to do same check as above (on line 60, to check whether the attrs expression is truthy/not empty) as that would work with any falsey value.

[wkonkel]

I copied this from isEditable on line 50 which is also default-true. Line 60 for appendToBody is default-false. If you prefer different style for default-true attributes, I would suggest updating both isEditable and focusFirst, but I think that's outside of the scope of this pull request.

[chrisirhc]

I see, in that case this is fine.

[chrisirhc]

Just reviewed. Looks good except for a minor change before we can merge it. Thank you!

[chrisirhc]

Just found one more thing, when the user presses the up arrow key, it should select the last element on the typeahead list. This PR is also missing tests.

[wkonkel]

Fixed problem with up arrow key and added test coverage.

[chrisirhc]

Since you're changing this line, could you break this into multiple lines for readability?

[chrisirhc]

Looks great. Just missing one more test.

[wkonkel]

I'm stuck on this test...

  it('should submit the form when hitting enter', function () {
    $scope.form_was_submitted = false;
    var element = prepareInputEl('<form ng-submit="form_was_submitted=true"><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-focus-first="false"><button type="submit">submit</button></form>');

    changeInputValueTo(element, 'b');
    triggerKeyDown(element, 13);
    expect($scope.form_was_submitted).toBeTruthy();
  });

It should be triggering the form's ng-submit, but it's not. Any suggestions?

[chrisirhc]

The submit event is not triggering because you need a submit button in the form (for Chrome). I think testing the submission of the form shouldn't be required, since that's browser specific and may/may not require a submit button in the form. This article contains the references to the specification: http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/

Perhaps you can test using ng-keydown event whether the $event.isDefaultPrevented() on the input field itself?

[wkonkel]

Yes, the expected behavior is that the outer form is submitted when hitting enter from the input and nothing is focused. I've tested it in a browser and it works as expected.

In the test I pasted above, the form already has a submit button <button type="submit">submit</button> and I also tried <input type="submit" /> but that didn't work either. I started down the path of checking for isDefaultPrevented but couldn't figure out how to access/mock the event objects from the tests.

[chrisirhc]

Actually, that could be a quirk in PhantomJS (Edit: It's using Chrome by default, so this shouldn't be the case.) , where the enter key doesn't work as expected.

With regards to finding the isDefaultPrevented, you should be able to do something like:

var element = prepareInputEl('<input ng-model="result" ng-keydown="keyDownEvent = $event; keyDownDefaultPrevented = $event.isDefaultPrevented()" typeahead="item for item in source | filter:$viewValue" typeahead-focus-first="false"></form>');

And then check that keyDownEvent is set and keyDownEventDefaultPrevented is false?
Testing this is indeed tricky.

[wkonkel]

That approach worked. Thanks!

[chrisirhc]

Excellent work. LGTM. This will be merged in a bit.

[chrisirhc]

I'll be rewording the commit message some of your commits later when I merge, to conform with our git commit message conventions. If you would like to do it yourself, please go ahead.
We're following the conventions at https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit .

[wkonkel]

Squash merged and reformatted commit message.

[mkoperator]

This is a very sweet feature, however, I think it is missing the action for tab. When nothing is selected pressing enter closes the typeahead, When pressing tab it goes to the next field but does not close the typeahead list. Not sure if this is the right place to note it.

[acgentry]

+1 to closing the typeahead onblur of the input, with templates the form could be covered in a large drop down and the user has to tab back after tabbing off and escaping the screen if he doesn't want to select anything.

[pnowy]

+1 to closing the typeahead onblur from me too! I have a form when the user can select something from dictionary or enter new value. When user does not select from popup and use tab the popup still appears. Does anyone know how can I prepare byway for this?

[lvostinar]

This commit is not really enough for us, not closing the list at tab out is quite a big deal. For now I just disabled the select by tab key, I think tab should be used for navigation only. Our scenario is that the user wants to quickly navigate using tab between input fields but doesn't want to change the value of the typeahead. So tab in/ tab out action should return the control to its initial state.

[icfantv]

@lvostinar, commenting on old and closed issues is a really good way for us to miss stuff.

As yours is a support related request, please follow the instructions here.

[lvostinar]

I commented here because I think this issue needs to be reopen. The fix is merged in your codebase but is not complete.

[icfantv]

@lvostinar, you want it to be reopened because this solution is not enough for you (your exact words). I interpret this to mean that you are wanting an added feature above and beyond what this issue and fix was designed to address.

If you would like us to consider your request, I ask that you please take the time to open a new issue to track this request we will see about addressing it. You can even reference this issue from the new one. Help us help you.