Amphtml: input autofocus inside <amp-lightbox> does not work on iOS

[wudizhuzhuxia]

Hi, I have a problem with focus. When I open amp-lightbox, I want to be able to automatic focusing on the inside of the amp-lightbox input tag,under the android mobile phone can do it, but under the ios browser can't do that. you can separately use android and ios mobile phone open the following url, click on the search button, will be able to reproduce the problem.

m.aliexpress.com

[aghassemi]

@wudizhuzhuxia @cathyxz Browsers tend to refuse to focus on invisible items in random fashion and autofocus has no concept of waiting for something to become visible first before moving focus. Transitions and such make building a true autofocus behaviour very difficult and that's why native autofocus doesn't really work passed basic cases.

What we need here is two new events on amp-lightbox. lightboxOpen and lightboxClose which then can be used to do manual focus. e.g.

<amp-lightobox on="lightboxOpen:myInput.focus">

These events need to fire when lightbox is fully visible so browsers won't refuse to focus.

We actually did a very similar solution for amp-sidebar a while back.

@wudizhuzhuxia Is this something that you can take on and contribute? Solution would be very similar to this PR https://github.com/ampproject/amphtml/pull/12505 which you can use as reference.

[aghassemi]

/cc @ericlindley-g

[wudizhuzhuxia]

Oh, thank you. I'll try my best.@aghassemi

[cathyxz]

@wudizhuzhuxia this was actually done in https://github.com/ampproject/amphtml/issues/13420 via #13578, so you should be unblocked to fix this issue with

<amp-lightbox on="lightboxOpen:myInput.focus">

when that PR gets to prod. Happy CNY! =)

[aghassemi]

Closing since the solution mentioned by @cathyxz will be in production in a week and will resolve the issue.

[leonalicious]

Hi we have tried

<amp-lightbox on="lightboxOpen:myInput.focus">

and it is still not working on iOS device. Here is the code for the simple demo aemsite/ampdemo

[cathyxz]

There was a bug with the original fix for this, fixed by @cvializ in https://github.com/ampproject/amphtml/pull/13756.

[aghassemi]

@cathyxz Could you investigate? iOS may have strict requirements on when .focus() is allowed and might not be happy if .focus() is called without a direct user action. It also won't be happy if called on hidden elements which makes thing more complicated. We may need to work some crazy workarounds for this.

@leonalicious Do you know of any non-AMP implementations where a similar functionality works in iOS?

[leonalicious]

we have uploaded the non-AMP working copy to our github, please refer to https://github.com/aemsite/ampdemo/blob/master/non-amp-ios-input.html

[micyeung]

Ping for @cathyxz @aghassemi - any updates here?

[cathyxz]

I'll slate this for the upcoming sprint.

[cathyxz]

The intended fix is to support autofocus in lightbox. You should be able to remove the on="lightboxOpen:input.focus" and just add the autofocus attribute per #14676.

[aghassemi]

Closed by #14676

[aghassemi]

reopening, this is happening again.

[cathyxz]

/cc @alanorozco who made recent changes to <amp-lightbox>

[ampprojectbot]

This issue hasn't been updated in awhile. @cathyxz Do you have any updates?