Dojo drop-down detaches when scrolling page containing FilteringSelect or ComboBox_问答_开发者

Dojo drop-down detaches when scrolling page containing FilteringSelect or ComboBox

开发者 https://www.devze.com 2023-04-08 00:38 出处：网络

Since the ComboBox and FilteringSelect use a \'dijitPopup\' whose DOM element gets inserted just before the closing body tag (presumably to help with ensuring it appears above everything else z-index-

Since the ComboBox and FilteringSelect use a 'dijitPopup' whose DOM element gets inserted just before the closing body tag (presumably to help with ensuring it appears above everything else z-index-wise) this means that if the ComboBox is contained in an element that scrolls independent of the window itself and the user opens the dropdown and then scrolls the window (or whatever containing element) using the scroll wheel, that the menu part doesn't move with the control itself.

Is there a straightforward way to ensure that the menu part of the view remains positioned correctly relative to the control itself rather than simply assuming that its starting position is ok?

EDIT: appears to be a known issue (http://bugs.dojotoolkit.org/ticket/5777). I understand why they put the dijit popup just before the closing body tag for z-index stacking and overflow cli开发者_运维问答pping issues, but it seems like it's maybe not the ideal way to do things given the bug in question here and things like:

You can restrict the Dijit theme to only small portions of a page; you do this by applying the CSS class of the theme to a block-level element, such as a div. However, keep in mind that any popup-based widget (or widgets that use popups, such as dijit.form.ComboButton, dijit.form.DropDownButton, and dijit.form.Select) create and place the DOM structure for the popup as a direct child of the body element—which means that your theme will not be applied to the popup.

~ from http://dojotoolkit.org/documentation/tutorials/1.6/themes_buttons_textboxes/

Not sure if this is the very best solution, but here's what I came up with:

Since the widget may be programmatically added/removed, and to avoid coupling a solution with some particular surrounding markup that we can't always count on in all cases, what I did was to hook the _showResultList and _hideResultList methods of ComboBox and when the popup opens, traverse up the DOM till we reach the <html> tag, adding onscroll listeners on each ancestor.

The handler for the onscroll event is simply:

var myPos = dojo.position(this.domNode, true);
this._popupWidget.domNode.parentNode.style.top = '' + (myPos.y + myPos.h) + "px";

where this is the widget in question. I scope the handler to the widget using dojo.hitch. In the close method I remove the listeners. I have to clean up the code a bit before it's presentable, but when it's finalized I'll add it to this answer.

Note: I only show updating the y position here. Part of the cleanup is to add x position updating in case someone scrolls horizontally.

Though its old I just faced this same problem and it looks like a Dojo issue and the fix is available here https://bugs.dojotoolkit.org/changeset/30911/legacy