Note that there are some explanatory texts on larger screens.

plurals
  1. POFilteringSelect with a QueryReadStore: selection doesn't stick
    primarykey
    data
    text
    <p>I am using a <code>dijit.form.FilteringSelect</code> backed by a <code>dojox.data.QueryReadStore</code> in order to allow the user to select a region (think "auto-complete" mechanism). On each character entered by the user, the <code>QueryReadStore</code> sends a request to the server, awaiting a json list of matching regions (with associated IDs). By the time a short enough list is shown, the user picks the desired item. [Admittedly, querying on every keystroke is not the most efficient pattern, but it's good enough for now.]</p> <p>Unexpected behaviour: in some rare but specific occasions, the choice made by the user "doesn't stick". For instance, if the user types "<code>can</code>", she is presented with the following choices in that order:</p> <pre><code>Atlantic Canada Canada English Canada Lower Canada Upper Canada Western Canada </code></pre> <p>If she chooses "<code>Canada</code>" among these, the dijit closes the drop down selection, having correctly selected her choice. But by the time the user leaves the field, the selection switches to "<code>Atlantic Canada</code>"!</p> <p>That bizarre phenomenon occurs systematically for a small number of specific regions. (At first, I thought that the common factor between those badly behaved regions was that their name contained accented characters or hyphens, but clearly not so with the Canadian example. So far, I fail to spot a regular pattern.)</p> <p>I have not found any mention of a similar problem anywhere. I am quite willing to investigate, but, as I am new to dojo, I would really appreciate pointers before I resort to delving inside dojo's code: where should I first look? what are some likely problems that could cause that behaviour? can i rule out certain hypotheses? how should I best use the console (or Firebug) to get to the bottom of this? etc.</p> <p>The problem occurs with both dojo 1.1.1 and dojo 1.2.3.</p> <p>Here is the (programmatic) generation of the <code>FilteringSelect</code>:</p> <pre><code>new dijit.form.FilteringSelect({ name = "region"; autoComplete = false; hasDownArrow = false; labelAttr = "name"; queryExpr = "${0}"; store = new dojox.data.QueryReadStore({url:'/query/regions'}); }, myNode); </code></pre> <p><strong>EDIT (2009/02/18): Additional details</strong></p> <p>Following damelin's answer, I wanted to understand what <code>FilteringSelect</code> saw of this situation. Suppose I connect logging functions to the <code>FilteringSelect</code>'s events <code>onChange</code> and <code>onBlur</code>, I get the following play-by-play sequence:</p> <ul> <li>I click in the field and type: <code>can</code></li> <li>drop-down list of 6 regions (listed above) appears</li> <li>with the keyboard cursors, I move down the list to "<code>Canada</code>" (which is region with id 1)</li> <li><p>I press <code>Enter</code> (thus <strong>selecting</strong> an item of the store). The drop-down list has by now disappeared and the text "<code>Canada</code>" appears in the field. At this point, the first event is fired, with the following logging:</p> <pre><code>onChange event: region 1 </code></pre></li> <li><p>I leave the field by pressing <code>tab</code>. Here, two events are fired one after the other, in the following order:</p> <pre><code>onBlur event: region 1 onChange event: region 246 </code></pre></li> </ul> <p>(Region 246 is <code>Atlantic Canada</code>.) Now that's very interesting... By the time I leave the field (onBlur), <code>Canada</code> still is the selected value. The mysterious swap happens only after that...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload