Fix - combo template not closing in Firefox

Combo template popup in AW 2.0.0 does not close if you click outside of the popup. Sorry that it took so much time to correct this - here is the patch.

CSS:

.aw-gecko .aw-popup-window .aw-ui-list {
    display: block; /* fixes list overflow problem */
}

.aw-ie .aw-templates-combo {
    padding: 0px;
}

.aw-ie .aw-templates-combo .aw-item-box {
    padding: 1px;
}

.aw-gecko .aw-edit-cell {
    padding: 0px;
}

.aw-gecko .aw-edit-cell .aw-item-box {
    padding: 1px;
    overflow: auto; /* fixes missing text cursor in combo template */
}

script:

if (AW.version = 200){

    AW.Templates.Combo.create = function(){

        AW.Templates.Popup.create.call(this);

        var obj = this.prototype;

        obj.setAttribute("awx", "combo");
        obj.setClass("templates", "combo");
        obj.setClass("combo", "box");

        var button = new AW.HTML.TABLE;

        button.setClass("combo", "button");
        button.setAttribute("cellspacing", "0");

        button.setEvent("onclick", function(event){
            if (this.$owner && this.$owner._cellTemplate){
                var combo = this;

                this.$owner.setController("popup", {
                    onCellEditEnding: function(){
                        try {
                            if (AW.gecko && combo.$popup) {
                                var event = combo.raiseEvent.caller.caller.arguments[0];
                                var range = document.createRange();
                                range.selectNode(combo.$popup);
                                return event.target && (range.compareNode(event.target) == 3);
                            }
                        }
                        catch(err){
                            //
                        }
                    },
                    onCellEditEnded: function(){
                        combo.hidePopup();
                        combo = null;
                        this.setController("popup", {});
                    }
                });
                this.raiseEvent("editCurrentCell", event);
            }

            this.showPopup();
            this.getContent("box/text").element().focus();
            this.getContent("box/text").element().parentNode.scrollTop = 0;
        });

        obj.setContent("box/sign", button);
        obj.setContent("box/sign/html", "<tr class=\"aw-cb-1\"><td></td></tr><tr class=\"aw-cb-2\"><td>&nbsp;</td></tr><tr class=\"aw-cb-3\"><td></td></tr>");

    };
}

To apply the patch you have to add CSS rules to the end of aw.css and the script to the end of aw.js (or replace AW.Templates.Combo code).

Here is an example using combo template -

var list = new AW.UI.List;
    list.setItemText(function(i){return "Item " + i});
    list.setItemCount(25);

    var obj = new AW.UI.Grid;

    obj.setCellData("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);

    obj.setCellEditable(true);

    obj.setCellTemplate(new AW.Templates.Combo, 1);

    obj.setPopupTemplate(list);

    document.write(obj);

Alex

Thanks for this.

I've tried it and seem to be having pretty inconsistent results.

Using your example, if I click on the arrow in the top combo in column 2, sometimes (haven't been able to see any pattern to this) what happens is the cursor and focus moves to cell 1,1 as if that cell is about to be edited.

Also, when selecting an item from the dropdown, the dropdown closes OK, but the selection doesn't immediately appear in the combo box. It only appears if you scroll down/up (again this seems inconsistent).

Have you seen these strange effects? (I've put the patches at end of the runtime versions of aw.css and aw.js as instructed.)

Will

... although I seem to have difficulties with your example, I have got it working correctly in my application. Maybe I'm reacting too quickly - apologies.

Will

Thanks Alex,
Good work by the way.
It is kinda sad that you had to micro manage the object in that way.

Well, the proper solution involves rewriting focus manager code for FF to make popup DIV behave like a separate 'window'. I am still going to do it, but it will take some time.

i just tried alex's example and it works great. however, i tried to have a different drop down list on 2 columns and it doesn't work. here are my changes:

var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];

//obj.setCellTemplate(new AW.Templates.Combo, 3);

obj.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
if (col==1) {
list.setItemText(popUpSelections_1);
list.setItemCount(4);
}
else {
list.setItemText(popUpSelections_2);
list.setItemCount(3);
}
return list;
});

even if i don't set another column to setCellEditable(true), this code will break. Am i calling setPopupTemplate correctly?

thanks

If you have multiple combo columns use multiple popup templates -

var data1 = ["Email","Phone","FedEX","USPS"];
    var data2 = ["reconciled","unreconciled","hopeless"];

    var list1 = new AW.UI.List;
    list1.setItemText(data1);
    list1.setItemCount(data1.length);

    var list2 = new AW.UI.List;
    list2.setItemText(data2);
    list2.setItemCount(data2.length);

    var obj = new AW.UI.Grid;

    obj.setCellData("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);

    obj.setCellEditable(true);

    obj.setCellTemplate(new AW.Templates.Combo, 1);
    obj.setCellTemplate(new AW.Templates.Combo, 2);

    obj.setPopupTemplate(list1, 1);
    obj.setPopupTemplate(list2, 2);

    document.write(obj);

works perfectly! thank you so much!

One more correction - somehow popup z-index was lost in FF, so this rule should be added -

.aw-gecko .aw-popup-window {
z-index: 10000;
}

Complete CSS patch -

<style>

.aw-gecko .aw-popup-window .aw-ui-list {
    display: block; /* fixes list overflow problem */
}

.aw-ie .aw-templates-combo {
    padding: 0px;
}

.aw-ie .aw-templates-combo .aw-item-box {
    padding: 1px;
}

.aw-gecko .aw-edit-cell {
    padding: 0px;
}

.aw-gecko .aw-edit-cell .aw-item-box {
    padding: 1px;
    overflow: auto; /* fixes missing text cursor in combo template */
}

.aw-gecko .aw-popup-window {
    z-index: 10000; /* should be above other elements */
}

</style>

I am not sure... Do you have your AW updated on this server ? The combo still not closing in FF 1.5.0.2

I have seen some on some other server (awfriends or something like that), the combo was closing in their demo (even whei I did not see any differencies in the source code), but after doubleclick anywhere or selecting a value...

I am trying the demo version... and FF supported this partialy way is a bit tricky... Am I missing something ?

I found the reason !

FF since 1.5 forces UTF-8. When I am coding I have to force UTF-8 for my pages too... But i forgot (and you Alex ahould use the same technique through whole your web) to force it for linked CSS too..

Working now (at last with the same behaviour I described dtto)..