开发者

Dojo Combobox [Enter] Key Event Killing Data Store Response

开发者 https://www.devze.com 2023-02-24 06:01 出处:网络
I have configured the dojo combobox as follows: this.autoComplete = new dijit.form.ComboBox( { id : this.name + \"_term\",

I have configured the dojo combobox as follows:

this.autoComplete = new dijit.form.ComboBox( {
  id : this.name + "_term",
  name : "search_id",
  store : this.dataStore,
  searchAttr : "term",
  pageSize : "30",
  searchDelay:500,
  value : this.config.inputText,
  hasDownArrow : false
}, this.name + "_term");

The issue here is that when the user enters their search term and hits [Enter] before the 500ms, the service request gets canceled (common when copy and pasting a search term). What I expected to happen is for it to simply ignore the [Enter] event until the request is complete and options are displayed in the dropdown. The user could then hit enter again to submit the first item in the response.

Hoping to get some suggestions on how to handle this scenario. I've looked through the api for dijit.form.ComboBox, but didn't see anything compelling that could address this. Note that the exact same behavior exists if I use Filt开发者_开发问答eringSelect instead of ComboBox. The interesting thing is that FilteringSelect treats this scenario as an error that is handled by the "invalidMessage" param. I don't understand the benefit of treating this as an error.


I've (temporarily) solved the issue by monkey patching dijit.form.ComboBox by overriding the _onKeyPress function. I'm using dojo v1.5 and noticed that v1.6 changed _onKeyPress to _onKey. So upgrading will obviously break things.

I've updated the [Enter] event handling like so:

  case dk.ENTER:
    // prevent submitting form if user presses enter. Also
    // prevent accepting the value if either Next or Previous
    // are selected
    if(highlighted){
      // only stop event on prev/next
      if(highlighted == pw.nextButton){
        this._nextSearch(1);
        dojo.stopEvent(evt);
        break;
      }else if(highlighted == pw.previousButton){
        this._nextSearch(-1);
        dojo.stopEvent(evt);
        break;
      }
    }else{
      if (!module.autoComplete.item) {
        doSearch = true;
      }
      // Update 'value' (ex: KY) according to currently displayed text
      this._setBlurValue(); // set value if needed
      this._setCaretPos(this.focusNode, this.focusNode.value.length); // move cursor to end and cancel highlighting
    }
    // default case:
    // prevent submit, but allow event to bubble
    evt.preventDefault();
    // fall through
    break;

The code in question is:

if (!module.autoComplete.item) {
  doSearch = true;
}

I'm basically telling it to do the search only if the autocomplete object instance exists and hasn't recieved any items yet. This is an ugly hack, but it's solving the issue for the moment. I would still love some suggestions on how to handle this better.

0

精彩评论

暂无评论...
验证码 换一张
取 消