Question

I have encountered a strange behaviour using dijit.form.select inside a tooltip-dialog. Here’s a shortened part of my code:

<div id="toolbar" dojoType="dijit.Toolbar">
  <div dojoType="dijit.form.DropDownButton">
    <div dojoType="dijit.TooltipDialog" id="tooltip">
      <input dojoType=dijit.form.TextBox type="text" id="textbox">
      <select id="select" dojoType="dijit.form.Select">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button dojoType="dijit.form.Button" type="submit" id="button">click</button>
    </div>
  </div>
</div>

Whenever I open the toolbar and the form displays, the tooltip dialog will close, as soon as I choose an option from the select in IE only! FF is ok …

My workaround for now is to use a normal select (I just omit ‘dojoType=”dijit.form.Select”‘), but for layout-reasons I’d like to have a dijit.form.select.

Any hint is appreciated.

Greetings, Select0r

Answer 1

1. Using a normal “select” is not an option as I need to change the options dynamically which really is a pain with a normal select. I’d also like all selects on the page to look the same.
2. dijit.FilteringSelect will not show the same error but requires a different handling of changing the options dynamically. I also don’t like the dropdown being an input field.

So I’ve come up with the following workaround, which still is not an acceptable solution but at least something I can live with for now:

<div dojoType="dijit.form.DropDownButton" id="DropDownButton">
  <div dojoType="dijit.TooltipDialog" id="tooltip">
    <input dojoType=dijit.form.TextBox type="text" id="textbox">
    <select id="select" dojoType="dijit.form.Select" onChange="dijit.byId("DropDownButton").openDropDown();">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button dojoType="dijit.form.Button" type="submit" id="button">click</button>
  </div>
</div>

1. dijit.Toolbar was removed, as it was of no use.
2. the Select will now call the DropDownButton’s method “openDropDown” onChange, showing the TooltipDialog again.

Now I’m able to use the TooltipDialog in IE – but still one issue remains: the TooltipDialog remains hidden in IE until I move the mouse a pixel. But at least I don’t have to click on the button again to open the dialog.