vitalets/x-editable — pull request #476 by mo-getter (2013-12-19 08:44:04+00:00)
Title: typeaheadjs: Fix Issue #452, and probably a few more

This is a fix for two bugs I encountered. In short, the issues were caused by the internal states of the `value` variables between the editable and typeahead.js getting out of sync.

Both bugs are visible on the [x-editable demo page](http://vitalets.github.io/x-editable/demo-bs3.html)

1. Click the editable for Twitter typeahead.js ("Califormia")
2. Without modifying the text, click the submit button

Value will become "Empty", when it should remain the same. This differs from the Bootstrap2 implementation, which behaves as expected.

The problem turned out to be that typeahead.js places a blur listener on the input that sets the input value to its last-known query before the editable's submit event is triggered. See line 962 of included lib/typeahead.js (0.9.3):

this.inputView.setInputValue(this.inputView.getQuery());

The problem in x-editable was that typeahead(datasets) is called on the input before the `EditableForm` is rendered, so getQuery() returns empty string because that's what it was initialized with, and setQuery is only called when the textbox's value changes.

The fix is to create the typeahead in the `activate()` method rather than the render, since the input is guaranteed to be initialized by this point.

The other bug is similar, but related to the clear button. On the demo page (same element):

1. Click California anchor
2. Select a different value from the dropdown
3. Click the "clear" button

The previously chosen element text remains in the input field.

The fix for this was to call `.typeahead('setQuery', '')` in the `clear()` method.

Very nice library. Keep up the great work, all!