Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#16725 closed defect (fixed)

TextBox inside an IFrame will not allow input on an IPad

Reported by: Mark DeMichele Owned by: Douglas Hays
Priority: undecided Milestone: 1.9
Component: Dijit - Form Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

This issue is somewhat related to ticket:16622.

IF you look at _onFocus inside _FormWidgetMixin.js, there is some special handling to set the focus on mouse up. It's this handling that's confusing the IPad.

Also, the IPad automatically will scroll to the focus control, so I believe doing it manually just complicates issues.

To fix this, I enclosed all that extra logic inside a !has("ios").

I will be uploading patches shortly.

Attachments (2)

textBoxInIFrameTest.patch (2.5 KB) - added by Mark DeMichele 7 years ago.
This patch contains only the test html files. Load this first and go to dijit/tests/form/test_TextBoxIFrame.html on an IPad in order to demonstrate the problem.
_FormWidgetMixin.js.patch (2.4 KB) - added by Mark DeMichele 7 years ago.
This file contains the fix for the problem.

Download all attachments as: .zip

Change History (9)

Changed 7 years ago by Mark DeMichele

Attachment: textBoxInIFrameTest.patch added

This patch contains only the test html files. Load this first and go to dijit/tests/form/test_TextBoxIFrame.html on an IPad in order to demonstrate the problem.

Changed 7 years ago by Mark DeMichele

Attachment: _FormWidgetMixin.js.patch added

This file contains the fix for the problem.

comment:1 Changed 7 years ago by bill

Doug - it seems like the scrollOnFocus() call should only happen on keyboard input, and not mouse nor touch, do you agree? (Unfortunately dijit/focus sets by == "mouse" even for touch events, but I don't think it matters in this case since which it seems like we shouldn't scroll in either case.)

As for the code in _FormWidgetMixin::_onFocus() to focus the widget on mouseup/touchend if the browser doesn't do it natively, we talked about that in #16622. After disabling the code for iOS, test_Dialog.html still seems to work for me, but maybe you see some other problem with it?

comment:2 Changed 7 years ago by bill

Even with the patch, I can't get input to work unless I focus the input twice.

From IRC, snover wrote that:

ios text fields inside iframes are just broken generally if you have any touch handlers set on anything that shares the coordinates with one of the input fields

Dijit has listeners on the document in dijit/focus and I guess also _CssStateMixin, so this failure is expected. See http://stackoverflow.com/questions/6876706/text-selection-bug-in-mobile-safari-with-iframes-and-ontouchstart for more details.

This was on iOS6.1 whereas demi is using iOS6.

comment:3 Changed 7 years ago by Douglas Hays

Milestone: tbd1.9
Status: newassigned

comment:4 Changed 7 years ago by Douglas Hays

Resolution: fixed
Status: assignedclosed

In [30635]:

Fixes #16725. Never change focus inside an event handler that can change with focus natively.

comment:5 Changed 7 years ago by bill

Resolution: fixed
Status: closedreopened

[30635] breaks many regression tests:

  • Dialog_mouse
  • robot.Select
  • Editor_mouse

comment:6 Changed 7 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

In [30663]:

Fixes #16725. Defer the alternate-focusNode-focus() for touchend only so that we're not fighting native focus events.

comment:7 Changed 7 years ago by bill

In [31192]:

On touchend on the placeholder, focus immediately, rather than delayed by a this.defer(), so that the keyboard pops up. Fixes #11578 , refs #16725 !strict.

Note: See TracTickets for help on using tickets.