title: dojo - widget not appearing correctly on first instance
body: <p>I have been using <a href="http://dojotoolkit.org/documentation/tutorials/1.8/understanding_widgetbase/" rel="nofollow">dojo 1.8 framework to create a widget</a> that includes some other <a href="http://dojotoolkit.org/documentation/tutorials/1.8/menus/" rel="nofollow">menu widgets</a>. When I create an instance of it it appears, but only shows the basic template elements, and under closer inspection, the menu widgets havent been added. Then when I make a second instance of it, (via button click), it appears correctly, including menus.</p>
  
  <p>This is really confusing me, any ideas?</p>
  
  <p>oh and I'm calling startup() on the widget instance by the way.</p>
  
  <p>here is the code for my template...</p>
  
  <pre><code>&lt;div class="${!baseClass}ConfigPanel"&gt;
          &lt;div data-dojo-attach-point="heading"&gt;Configure data&lt;/div&gt;
          &lt;div id="menuContainer" data-dojo-attach-point="menu"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the code for my widget...</p>
  
  <pre><code>define(
      ["dojo/_base/array",
      "dijit/Menu",
      "dijit/MenuItem",
      "dijit/PopupMenuItem",
      "dojo/_base/declare",
      "dijit/_WidgetBase",
      "dijit/_TemplatedMixin",
      "dojo/text!gdv/chart/configuration/panel/chartConfigTemplate.html",
      "dojo/domReady!"],
      function (ArrayUtil, Menu, MenuItem, PopupMenu, declare, WidgetBase, TemplatedMixin, template){
  
          var _menuData = [{title:"Region", data:["Region1", "Region2", "Region3"]},
                                          {title: "Variable", data:["variable1", "variable2", "variable3"]},
                                          {title: "Period", data:["period1", "period2"]},
                                          {title: ["latest", "rt1", "rt2"]}];
  
  
          /**
           * Build menu items up with a popup menu style
           */
          function buildMenu(nodeId, menuItems){
              var mainMenu = new Menu({label: "main menu"}, nodeId);
              var subMenuCollection = [];
              var subMenu;
  
              ArrayUtil.forEach(menuItems, function(item, index){
                  subMenu = new Menu({label: item.title});
                  subMenuCollection.push(subMenu);
  
                  //loop through each item in data and create a new menu item from it
                  ArrayUtil.forEach(item.data, function(subItem, subIndex){
                      subMenu.addChild(new MenuItem({label: subItem}));
                  });
  
                  //set the sub menu to popup from the main menu
                  mainMenu.addChild(new PopupMenu({label: item.title, popup: subMenu}));
  
              });
  
              //create the menus
              mainMenu.startup();
  
              //start each sub menu
              ArrayUtil.forEach(subMenuCollection, function (item, index){
                  item.startup();
              });
          }
  
          //return a new widget class
          return declare([WidgetBase, TemplatedMixin], {
              templateString: template,
              baseClass: "plumePlots",
  
              //when dom structure is ready but before page insertion
              postCreate: function(){
  
                  //run all parent postCreate functions
                  this.inherited(arguments);
  
                  var menuNode = this.menu;
                  buildMenu(menuNode.id, _menuData);
              }
          });
      }
  )
  </code></pre>