Question

When I click on an item I can edit the field thanks to bootstrap-editable.
When I drag and drop the item I am able to change the position of the item thanks to jquery.ui.sortable.

Using Google Chrome everything works fine.
By using Firefox 15.0.1 I have the following issue.

After I move the item, it appears the popup to edit the field.
I suppose this event is due to the event propagation.
I tried to fix it but with no success…

Here is my piece code:

    onSortReceive: function (e, ui) {
        this.$(ui.item[0]).trigger('drop', this.options.taskType);
        // TODO just on firefox there is a issue related to bootstrap-editable
        // it shows the popup even if there is e.stopPropagation() here
        // the only way to fix this issue is to re-render the view
        e.stopPropagation(); // it makes no difference 
        this.render(); // it fix the problem 
                       // but I want to avoid to re-render the view
    },

For the full code you can go on:
https://github.com/antonioJs/CoCoTask/pull/21/files

For the working version you can go on:
http://computerone.altervista.org/CoCoTask/ (the problem is just with firefox)

Any idea how to fix the problem?

Thanks

Answer 1

Okay, here is one working way i found. In your taskItem.js replace onRender with following code:

    onRender: function () {
        var sortInAction = false;
        this.$el.find('label').mouseup(function(e) {
          sortInAction = 'absolute' === $(e.target).closest('li').css('position');
        }).click(function(e) {
            if (sortInAction)
              e.stopImmediatePropagation();
        }).editable({
            type: 'textarea',
            name: 'task-name',
            validate: this.editTaskName,
            template: '<textarea rows="3"></textarea>'
        });
    },

Hope it helps.