ExtJS findExact() and custom validator bug

Question

I'm using a custom validator on my combobox's:

function(v) {
    console.log(v === 'some value I know for SURE is in the store'); // (1)
    var index = this.getStore().findExact(this.displayField, v);
    return (index!==-1) ? true : 'Invalid selection';
}

Basically admits the same set as forceSelection but allows the user to type arbitrary text to attempt to auto-complete.

However; I'm having really odd results with findExact(). For example, if the combobox's value is currently valid, and a user does a space + backspace, the validator will fail, even though the output of (1) is true.

Any ideas what is causing the problem? The end-experience is currently very buggy-feeling..

Answer 1

When you type additional space, store is filtered. After you press backspace, and validator is fired, store is still empty.

If you have local store, then you could validate combo with some delay after each change. Example:

listeners: {
    change: function() {
        this.validate();
    },
    delay: 100
}

That should be enough.

On the other hand if you have remote store, try something like this:

validator: function(v) {
    var store = this.getStore(),
        index = store.findExact(this.displayField, v);

    if (index === -1 && store.isLoading()) {
        store.on('load', function() {
            this.validate();
        }, this, { single: true, delay: 100 });
    }

    return (index !== -1) ? true : 'Invalid selection';
}

Answer 2

I had a similar issue and found this entry. My problem was, that I reused the same store instance across multiple ComboBoxes. After giving each ComboBox an own store with cloned data, everything was fine. See also: https://www.sencha.com/forum/showthread.php?305182-ComboBox-forceSelection-clears-input&p=1127218&viewfull=1#post1127218

Answer 3

I just spent a few days on this issue and found a really great solution (by accident, really). You can - as the accepted answer suggests - utilize the provided validator function; however, from my understanding, there is a much simpler solution than the accepted answer provides: evaluating whether or not the user-provided input equates to a value in the store (which is the underlying question in the original post).

The advantage of thinking about the input in this way is that it enables us to handle the use case of an invalid value entered by the user (validated; no value) and - after the field loses focus - Ext JS sets the field back to its previous value (which remembers its store value).

This is an entirely different route than your thinking, but it should work, especially as .validate() runs regardless of whether you provide an implementation of the validator procedure:

validator : function(someParam) {
    if(this.value === null) {
        return "error message"; //falsy
    } else {
        return true;
    }
}

If you enable forceSelection, the above works, very well, and gets rid of the buggy feeling. This allows you to rely on the .validate to do its magic elsewhere (notice I don't even call it; read the doc. to figure out when its called in relationship to validator) and not have to worry about what the user correctly explains in the accepted answer.

Answer 4

We were having trouble with forceSelection clearing user text before they were finished typing. We seemed to get what we needed by setting forceSelection false and just checking that they selected something.

validator: function(v) {
    if (this.getSelection() === null) {
        return 'invalid text';
    }else{
        return true;
    }
}