Mobile Safari on iOS has a bug which prevents users from tapping on the "dismiss" or "reject" popup for autocorrected words in a text box when a web page is listening for the touchstart event on a parent of the text book.

This causes issues with autocorrect in both Sencha Touch and jQuery Mobile.

To repeat:

  • Create a page with an <input> field
  • Listen for touchstart using document.addEventListener with any listener, e.g. document.addEventListener('touchstart', function () { return true; }, false);
  • On an iOS hardware device, in Mobile Safari, enter a misspelled word into the field
  • Attempt to click the "x" to dismiss the autocorrect suggestion

Neither the return value of the listener (nor any side effect of the listener) nor the capture/bubble boolean argument seems to affect this bug.

Work-around

Binding to each input's focus and blur events to unregister and reregister any touchstart listeners before and after text input does seem to work around the bug.

Using jQuery (v1.4 or greater for focus/blur support in live):

function attachTouchstartListener(opts) {
    var options = opts || {},
        listener = options.listener || function () {},
        target = options.target || document,
        capture = opts.capture || false;
    function registerListener() {
        target.addEventListener('touchstart', listener, capture);
    }
    function unregisterListener() {
        target.removeEventListener('touchstart', listener, capture);
    }
    jQuery('input').live('focus', unregisterListener);
    jQuery('input').live('blur', registerListener);
    registerListener();
}

However, if there's a problem handling the blur event (e.g. another handler cancels the event), anything on the page that relies on handling touchstart may become stuck in an unresponsive state.

Also possibly related