ComboBox selecting first row

[djMax]

I have a combo box here at the top of the screen in the "what" box:

http://boston.povo.com/

The problem is once it has suggestions, it automatically selects the first element. I don't want this because the user might want to type their own text that isn't one of the suggestions. In itself, this isn't so bad, because commenting out this line in Combo.js:onLoad fixes that:



this.selectNext();


But that's not enough as there are two other problems:

1) Hitting enter when nothing is selected has no effect, but it should just do what enter normally does.
2) Using the mouse, if I hover over any item, I can not clear my selection by "unhovering"

So I can set about fixing these things, but this would seem like something Combo should support. Thoughts?

[devnull]

I do not see a comboBox where you describe...
perhaps you could post the code that constructs the combo, along with it's datastore.

[djMax]

The box has a watermark that says "e.g. pizza". If you type piz you will see it autocomplete and select the first element. Here's the code that made it. MultiComboBox is just a version of combo box that splits on commas (I included that class below). I realized I've extended ext here, but the behavior occurs on the sample app for ComboBox as well, but in that usage, it doesn't make conceptual sense to do anything but pick one of the matches.



Povo.TagComboBox = function(inputTag)
{
var ds = new Ext.data.Store({proxy: Ext.data.HttpProxy.MsAjaxProxy("TagService.asmx/PrefixMatch"),
reader: new Ext.data.XJsonReader({totalProperty: 'TotalMatches', root: 'Matches'}, [{name:'tag',mapping:Ext.util.Format.htmlEncode}])});
return new Ext.form.MultiValueComboBox({store:ds,displayField:'tag',minChars:3,hideTrigger:true}).applyTo(inputTag);
};




Ext.form.MultiValueComboBox = function(config)
{
Ext.form.MultiValueComboBox.superclass.constructor.call(this, config);
this.parser = Ext.util.StringCollection(config.separator || ',', config.escape || '\\');
return this;
};

Ext.extend(Ext.form.MultiValueComboBox, Ext.form.ComboBox, {
doQuery: function(q,forceall)
{
var charPos = Ext.cursorPos(this.el.dom);
var nt = this.parser.getItemAt(q, charPos);
Ext.form.MultiValueComboBox.superclass.doQuery.call(this,nt,forceall);
},
initValue : function(){
var sc = Ext.form.MultiValueComboBox.superclass;
if(this.value !== undefined){
sc.setValue.call(this,this.value);
}else if(this.el.dom.value.length > 0){
sc.setValue.call(this, this.el.dom.value);
}
},
setValue: function(v)
{
var cv = this.el.dom.value, charPos = Ext.cursorPos(this.el.dom);
var details = this.parser.parse(cv, charPos);
cv = cv.substring(0, details.itemStringStart) + v.quote(',') + cv.substring(details.itemStringEnd);
this.lastSelectionText = cv;
Ext.form.ComboBox.superclass.setValue.call(this, cv);
this.value = cv;
}
});

[Davepar]

StringCollection is another extension of yours?

I need to use a MultiValueComboBox as well. I tried the one in this other topic (http://extjs.com/forum/showthread.php?t=11806), but it didn't work on IE, choking somewhere in this:


var r = document.selection.createRange();
var d = r.duplicate();
d.moveToElementText(this.el.dom);
d.setEndPoint( 'EndToEnd', r );


Dave

[Davepar]

BTW, I agree with your original points. Ext's ComboBox is quite a ways behind other JS libraries. For example, the YUI autocomplete has a delimiter param, force selection on/off, etc. However, it's probably easier to augment Ext.form.ComboBox than to use another autocomplete widget from some other library and make it play nice with Ext's layout stuff.

If you find a solution for points 1 and 2, please post them. Thanks.