Bottom of Two dijit.InlineEditBox with dijit.form.Textarea Editor Does Not Open on Single Click

dijit.InlineEditBox is great, but if you have two stacked on each other in containers with undefined heights, things can get a little buggy for a user. Example:

The problem is that if you open up id=”one” first, the page height expands two rows to make a textarea, so when you click on id=”two”, the page re renders and doesn’t open “two”! (This will work going from “two” to “one” since the top part of the page won’t change.)

If you watch the focus and blur events you’d see the following from “two” to “one”:

Focus: two
Blur: two
… click one
… two closes
Focus: one
… one opens
Blur: one

If you watch the focus and blur events you’d see the following from “one” to “two”:

Focus: one
Blur: one
… click two
… one closes
Focus: two
…. NOTHING …..

Basically for some reason it doesn’t open. So to fix this, just implicitly call edit() during onFocus.


...
onFocus: function()
{
this.inherited(arguments);
this.edit(); // Force (technically it may get called twice now, oh well.)
},
....