Tap event on iPhone

[pmahoney]

I have an extended version of the Ext.field.Text component. Basically it makes the text field read only, but adds a 'tap' event so I can call code to manage data input to the field.

/**
 * Small extension to the field.text to add a tap event.
 */
Ext.define('Ux.field.TapText', {
    extend: 'Ext.field.Text',
    xtype: 'taptextfield',

    /**
     * @event tap
     * Fires when this field receives a tap
     * @param {Ux.field.TapText} this This field
     * @param {Ext.event.Event} e
     */

    config: {
        // @inherit
        readOnly: true,
    },

    // @private
    initialize: function() {
        var me = this;

        me.element.down('input').on('tap','doBubbleTap',me);
        
        me.callParent();
    },

    doBubbleTap: function(e, t) {
    	this.fireEvent('tap', this, e, t);
    },

    // @private
    // We'll show the clear icon even for read-only state.
    showClearIcon: function() {
        var me = this;

        if (!me.getDisabled() && me.getValue() && me.getClearIcon()) {
            me.element.addCls(Ext.baseCSSPrefix + 'field-clearable');
        }

        return me;
    },
    
    // @private
    setValue: function(value) {
    	this.value = value;

        if (this.rendered) {
        	var text = this.getText();
        	this.updateValue(text);
        }

        return this;
    },

    getText: function() {
    	if (this.value) {
            if (Ext.isString(this.value)) {
                return this.value;
            }

            if (tpl = this.getTpl()) {
            	return tpl.apply(this.value.getData());
            }

            return 'template required';
    	}
    	
    	return '';
    },

    getValue: function() {
        var value = this.value || null;
        return value;
    },

});

Works perfectly on Chrome and Safari, but the doBubbleTap() function does not get called when running on the iPhone.

Any ideas welcome.

[pmahoney]

I have an answer. Hope it makes sense.

Turns out iOS does not have a 'tap' event. Instead it re-purposes the 'click' event...

The following alteration to the initialize function did the trick.

    // @private
    initialize: function() {
        var me = this;

        if (Ext.os.is.iOS) {
            me.element.down('input').on('click','doBubbleTap',me);
        }
        else {
            me.element.down('input').on('tap','doBubbleTap',me);
        }
        
        me.callParent();
    },