Ext js Numberfield in Chrome device Emulator allow type "e" (exponential)

Question

I am having an issue with Ext JS number field. It is allowed to type the letter "e" in a number field component when I am using a device in google chrome emulator.

Steps to reproduce the behavior:

1. Enter in this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/36eh
2. Press F12 to open inspect mode.
3. Click on the Device icon to change to device mode.
4. Click to Run the fiddle again.
5. Type letter "e" in the number field component.
6. Verify that was possible to inform the letter "e" in device mode.

Have you guys ever seen this issue?

Thanks, Renato Carvalho.

Answer 1

You can use the following dirty hack:

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    items: [{
        xtype: 'numberfield',
        label: 'Decimal number',
        decimals: 2,
        decimalSeparator: ',',
        labelAlign: 'top',
        name: 'age',
        //inputType: 'number', // Instead of "click on the Device icon"
        // Our dirty hack/workaround 
        listeners: {
            keydown: function(cmp, e) {
                if(e.key() === 'e') {
                    e.stopEvent()
                }
            }
        }
    }]
});

Or you can use inputType: 'text' and filter the input, but it is more dirty way.. anyway if you will not find something more elegant, you can use this dirty hack.

Another solution:

<input type="number" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))">