View Full Version : Ext.Element#contains(textNode) always returns false, causing issues w/ hideOnMaskTap

7 Mar 2011, 9:10 AM
Sencha Touch version tested:


Platform tested against:

iOS 4 (particularly iPad with iOS 4.2.1)


The contains() method on Ext.Element returns false if passed a text node. Unfortunately, the version of WebKit on iOS 4.2 fires touchstart events off of text nodes.

Steps to reproduce the problem:

Open a modal popup dialog of some sort with a lot of text.
Tap the text in the dialog (may take 2-3 tries).

The result that was expected:

Tapping inside the dialog should never hide it, unless explicitly set to do so (e.g. buttons).

The result that occurs instead:

Tapping a text node inside the dialog hides the dialog.

Debugging already done:

I traced it down to Ext.Element#contains(textNode) always returning false. Haven't dug further into why that is, but it is probably related to its handling of non-element nodes.

Possible fix:

None as of yet

7 Mar 2011, 10:13 AM
Additional debugging:

I checked the Ext.Element#contains() implementation in ExtJS 3.2.2 (using jquery-bridge) and found that it is inconsistent across different browsers when passed a text node that is a descendant of the current element.

Let el = Ext.Element for HTML element with markup "<h3>Test</h3>".
el.contains(el.dom) returns true in all browsers.
el.contains(el.dom.childNodes[0]) returns the following based on browser:

IE8 - FAIL; throws the error "No such interface supported" when passed a text node. (FWIW this is likely the E_NOINTERFACE COM error code.)
Firefox 3.6 - true
Chrome 9.0 - false

My vote is that contains() be fixed so that it returns true in all browsers; barring that, it should return false in all browsers for consistency.