x-editable typeahead on submit input text gets cleared before post request

Question

Hello I have a link in my code setup as follows:

<a href="#" id="vtype" data-type="typeaheadjs" data-pk="4" class="editable editable-click" data-value="Sedan">Sedan</a>

and here is the javascript for initializing it:

$('a#vtype').editable({
    url: '/api/editVehicleType',
    success: processFieldReply,
    typeahead: {
                name: 'edit-vehicle-' + $(this).attr('id'),
                remote: '/autocomplete/getVehicleTypes/%QUERY',
                prefetch: '/prefetch/getVehicleTypes'
            }
});


function processFieldReply(reply){
    if (reply.status == 'error') {
        return reply.msg;
    }
}

I click on the link, popup shows and I just press submit and before releasing the button the value inside the text field gets cleared hence my server responds with and error because the value is never being send.

After some investigation I noticed that happens only when I set the data-type="typeaheadjs" so it might have to do with typeahead.js and the initial value being null or something?

PS: Only this piece of js is currently loaded in the page the rest are jquery 1.10, bootrstap 3, bootstrap-editable.js, typeahead.js, typeaheadjs.js (addition to original typeahead.js)

Answer 1

I found the problem. The x-editable is trying to set the value of the input after it has been initialized with typeahead with .val(value). But this doesn't work, it needs to be done via

$(input).typeahead('setQuery', value)

I created a pull request solving this issue: https://github.com/vitalets/x-editable/pull/579