Using Ext 4.0 pr 3.

I have a combo box whose value I would like to clear as a result of a user action. I can successfully "clear" the combo box so that it visually appears to be cleared, but after doing so, the combobox will no longer allow the user to select the same value again (eg. user selects "Rover", clicks "Clear", then tries to select "Rover" again). The combobox just ignores these clicks until the user selects a different value than before. The example below shows that Ext doesn't even fire the "select" event when the user the same value after the clear.

I have tried many different approaches (see below) but none of them seem to work. Is this a bug or am I doing something wrong?

Code:
Ext.regModel('Dog', {
    fields: [
        'name'
    ]
});

var petStore = new Ext.data.Store({
    model: 'Dog',
    data: [
       {id:123,name:'Rover'},
       {id:456,name:'Alfred'}
    ]
});

// ComboBox with list of clients
var petCombo = new Ext.form.ComboBox({
    id: 'pet-combo',
    name : 'dog',
    valueField: 'name',
    displayField: 'name',
    allowBlank: false, // doesn't seem to do anything
    emptyText : "Pick a pet",
    fieldLabel: "Dog",
    store: petStore,
    queryMode: 'local',
    forceSelection: true,
    listeners:{
        scope: this,
        'select': function(cmb, recs, idx) {
            console.log('selected:' + (recs.length > 0 ? recs[0].get('name') : undefined));
        }
    },
});

var petForm = Ext.create('Ext.form.FormPanel', {
    frame : true,
    title : "Pet Store",
    width : 150,
    fieldDefaults : {
        labelWidth : 50
    },
    items: [
        petCombo,
    {
        xtype: 'button',
        text : "Clear",
        handler : function() {
            petForm.getForm().reset();
            var cc = Ext.getCmp('pet-combo');
            cc.clearValue();
            cc.reset();
            cc.setValue("");
            cc.setValue(null);
            cc.setValue(undefined);
        }
    } ]
});