deactivate editToolbar with map onClick

Question

I have the below function to enable editing. I click on an editable feature, the infoWindow is displayed with attributeInspector and the editToolbar (move point) is activated.

I would like to call editToolbar.deactivate(); when the user clicks off the infoWindow (anywhere on the map). This would also hide the infoWindow. The below does not work. As soon as the feature is clicked, the infoWindow flashes, then closes.

If I comment out the map onClick listener, then all is well.

Any help with this?

Thanks!!

dojo.connect(map, "onLayersAddResult", initEditing);

function initEditing(results) {
    var map = this;
    var currentLayer = null;

    var featureLayers = dojo.map(results, function(result){
        return result.layer;
    });

    var editToolbar = new esri.toolbars.Edit(map);

    dojo.connect(map, "onClick",function(evt){
        editToolbar.deactivate();
        map.infoWindow.hide();
    });

    dojo.connect(editToolbar, "onGraphicMoveStop", function(graphic, transform){
        editToolbar.deactivate();
        map.infoWindow.hide();
        currentLayer.applyEdits(null,[graphic],null);
    });        

    var query = new esri.tasks.Query();    
    dojo.forEach(featureLayers, function(layer){            
        dojo.connect(layer, "onClick", function(evt){                           
                dojo.stopEvent(evt); //stop propogation of layer onClick event, otherwise it fires the map onClick event which would hide infoWindow & deactivate editToolbar           
                currentLayer = this;
                editToolbar.activate(esri.toolbars.Edit.MOVE, evt.graphic);                 

                if (map.infoWindow.isShowing) {
                    map.infoWindow.hide();
                }               

                //layerInfos specific to each editable featureLayer
                if (layer.name == "Facilities"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'site_code', 'isEditable':false,'label':'FacID'},
                            {'fieldName':'facil_type','isEditable':false,'label':'Type'},
                            {'fieldName':'facil_name', 'isEditable':false,'label':'Name'},
                            {'fieldName':'address', 'isEditable':true,'label':'Address'},
                            {'fieldName':'facil_location', 'isEditable':true,'label':'City/State'},
                            {'fieldName':'zip', 'isEditable':true,'label':'Zip'}
                        ]
                    }]
                }
                else if(layer.name == "Edit Points"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'type', 'isEditable':false,'label':'Edit Type'},
                            {'fieldName':'approved', 'isEditable':true,'label':'Edit Status'},
                            {'fieldName':'notes', 'isEditable':true,'label':'Notes','stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}
                        ]
                    }]
                }
                else if(layer.name == "Markup - Line"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'notes', 'isEditable':true,'label':'Notes','stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}
                        ]
                    }]
                }
                else if(layer.name == "Markup - Polygon"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'notes', 'isEditable':true,'label':'Notes','stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}
                        ]
                    }]
                }
                else if(layer.name == "Markup - Point"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'notes', 'isEditable':true,'label':'Notes','stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}
                        ]
                    }]
                }
                else if(layer.name == "Sampling Locations"){
                    var layerInfos = [{
                        'featureLayer': layer,
                        'fieldInfos': [
                            {'fieldName':'site_code', 'isEditable':false,'label':'FacID'},
                            {'fieldName':'narrative','isEditable':true,'label':'Notes'}
                        ]
                    }]
                }

                var attInspector = new esri.dijit.AttributeInspector({
                    layerInfos: layerInfos
                }, dojo.create("div"));

                //select the feature that was clicked
                query.objectIds = [evt.graphic.attributes.OBJECTID];
                layer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features) {
                    map.infoWindow.setContent(attInspector.domNode);
                    map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
                })

                dojo.connect(attInspector, "onAttributeChange", function(feature, fieldName, newFieldValue) {
                    feature.attributes[fieldName] = newFieldValue;
                    feature.getLayer().applyEdits(null, [feature], null);
                });

                dojo.connect(attInspector, "onDelete", function(feature) {
                    feature.getLayer().applyEdits(null, null, [feature]);
                    map.infoWindow.hide();
                });             
        });
    });
}

Answer 1

It sounds like the click event on the map is fired after the onClick of the layer, and therefore hides the info window as soon as it is shown. Why don't you connect to the onShow event of the info window and only then hook up your map onClick event? Similarly onHide event disconnect the onClick event

untested code:

var handler;
dojo.connect(map.infoWindow, "onShow", function(){
  handler = dojo.connect(map, "onClick",function(evt){
    editToolbar.deactivate();
    map.infoWindow.hide();
  });
}

dojo.connect(map.infoWindow, "onHide", function(){
     dojo.disconnect(handler)
});