Opened 9 years ago
Closed 9 years ago
#11660 closed defect (wontfix)
OnmouseEnter/Leave ComboBox bug
| Reported by: | zladivliba | Owned by: | sjmiles |
|---|---|---|---|
| Priority: | blocker | Milestone: | tbd |
| Component: | Events | Version: | 1.5 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
Hi guys !
I found a real nasty bug using onmouseEnter/Leave (and onmouseover) inside a widget. Here's how to reproduce :
- define these events for a div
- adding Comboboxes or FilteringSelect? inside this div
Now when the user mouse pointer will onmouseOver the comboBox/FilteringSelect, the onMouseLeave event will fire on.
That means : while your pointer *is still inside the div*, where the events were defined orignally, the onmouseLeave will fire.
This should not happen when the mouse pointer is still inside the original div.
Here's a widget that will show you the problem :
<div class="F1" dojoAttachEvent="onmouseenter:ShowOptions, onmouseleave:HideOptions">
<div class="F1"> </div> <div class="F1 " dojoAttachPoint="Options" style="display:none">
<div class="F1 " dojoAttachPoint="Description"> Description
</div> <div class="F1" dojoAttachPoint="SelectItem?"></div> <div class="F4 " dojoAttachPoint="Add"></div>
</div>
</div>
========================================================
dojo.provide("de.Ts");
dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojox.data.JsonRestStore?"); dojo.require("dojox.data.QueryReadStore?"); dojo.require("dijit.form.FilteringSelect?"); dojo.require("dijit.form.ComboBox?"); dojo.require("dijit.InlineEditBox?"); dojo.require("dijit.form.Textarea"); dojo.require("dojo.date"); dojo.require("dijit.form.Button"); dojo.require("dojo.fx");
dojo.declare("de.Ts",
[dijit._Widget,dijit._Templated], {
widgetsInTemplate:true, Mode:"Stopped", StartDate:"", Intval:"", EditTimer:null, ItemsStore:null, Store:null, DescriptionStore:null, State:"Closed", ItemsSelect:null, DescriptionBox:null,
templatePath: dojo.moduleUrl("dgets","templates/Timesheet.html"),
postMixInProperties: function(){
this.ItemsStore? = new dojox.data.QueryReadStore?({ url: "/te/teee"
});
this.DescriptionStore? = new dojox.data.QueryReadStore?({
url: "/te/t"
});
this.Store = new dojox.data.JsonRestStore?({
target:"/t", idAttribute:"id"
});
},
postCreate: function(){
this.ItemsSelect? = new dijit.form.FilteringSelect?({
store: this.ItemsStore?, searchAttr:"name", autoComplete:true, highlightMatch:"all", labelType:"html", required:false, onFocus: function(data){
this.State = "Opened"; console.log(this.State);
}, onBlur: function(data){
this.State = "Closed"; console.log(this.State);
}
}).placeAt(this.SelectItem?);
this.DescriptionBox? = new dijit.form.ComboBox?({
store: this.DescriptionStore?, searchAttr:"name", autoComplete:true, hasDownArrow:false
}).placeAt(this.Description, "last");
Create the button to add the timesheet
new dijit.form.Button({
label: "Add timesheet", onClick: dojo.hitch(this, function() {
this.AddTS();
})
}).placeAt(this.Add);
},
ShowOptions?: function(){
console.log('show');
dojo.fx.wipeIn({
node: this.Options, duration: 500
}).play();
},
HideOptions?: function(event){
console.log(event.target);
console.log("hide");
dojo.fx.wipeOut({
node: this.Options, duration: 500
}).play();
}
);
This is expected behavior because the ComboBox? popup is attached to <body>.
However, if you change your code so that _onBlur() calls HideOptions?, and _onShow() calls showOptions() (rather than using onmousenter, onmouseleave at all), then it will do what you want. Don't forget your this.inherited() calls.