Dojo, Dijit, Dropdowns, and _aroundNode

By  on  

The Dojo Toolkit's awesome UI framework, Dijit, has loads of awesome widgets to allow developers to quickly create themed, feature-rich web applications. Dijit provides form widgets, layout widgets, dropdown-based widgets, and much more. What's nice about Dijit is that there's so much functionality provided that you don't need to code everything yourself. The down side of that? That it can be difficult to find the undocumented pieces of functionality required to accomplish your goal.

One case recently came up where I was working on a widget that extended dijit.form.FilteringSelect. My custom widget displayed messages under the widget's INPUT instead of the default tooltip behavior. The problem that introduced was that the widget's dropdown displayed a full 20 pixels under the INPUT node, so the two elements looked "detached." My assumption was that this was happening because the domNode grew in height because of my template change.

This is where it became difficult to know exactly where to look to fix the issue. I attempted a hack of adding margin-top: -20px to the FilteringSelect's dropdown node, which worked, but if the error text went down to two lines, the dropdown would still be detached -- obviously not the reliable solution. Where to look next?

I knew that dijit.popup manages the position of a popup, so that was my next stop. dijit.popup accepts one argument (an object) about the popup, with information about the widget, the node to pop up, an around property telling the method where to fit the popup by, and more. Seeing that, I needed to figure out where FilteringSelect's around setting was coming from. I also knew there is no property named around on the FilteringSelect widget, so more investigation was needed.

Within the creation signature for FilteringSelect, I saw that dijit._HasDropDown is a mixin. Looking at the _HasDropDown resource, I saw a method called openDropdown and right at the top of that method I found exactly what I needed:

openDropDown: function(){
	// summary:
	//		Opens the dropdown for this widget.   To be called only when this.dropDown
	//		has been created and is ready to display (ie, it's data is loaded).
	// returns:
	//		return value of dijit.popup.open()
	// tags:
	//		protected

	var dropDown = this.dropDown,
		ddNode = dropDown.domNode,
		aroundNode = this._aroundNode || this.domNode,
		self = this;
		
	// more...
	

The _aroundNode that was being passed to dijit.popup is the domNode unless a special _aroundNode property is explicitly set. Now I could set the _aroundNode property to my widget's focusNode (the INPUT):

this._aroundNode = this.focusNode;

This small addition fixes the detachment issue, directing dijit.popup to open the dropdown around the INPUT element and not the entire domNode.

These type of exercises are very helpful in both learning a framework and improving your debugging skills. Undocumented properties and features are present in any set of code, so the ability to trace through and find what you need is hugely important. It definitely was in this case!

Recent Features

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    Event Delegation with MooTools

    Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!