Allow autofocus to work inside <amp-lightbox> on iOS

[cathyxz]

Addresses #13332.

1. iOS requires focus to be inside a click handler in order to trigger focus and pop up the keyboard.
2. The focus cannot be in an async callback.
3. The lightbox needs to be visible (aka not display none) in order for input to be focusable.

Hence, proposing this fix for lack of a better solution (suggestions more than welcome). The downside is that it removes the mutateElement block surrounding the set display to ''.

iOS Safari working demo: https://amp-cathyxz.herokuapp.com/test/manual/amp-lightbox-focus.amp.html

[cathyxz]

The issue is basically that we need the tryFocus() to be applied to something visible, BUT due to iOS restrictions on focus needing to be synchronously called inside a click handler, we can't have it inside or waiting for a mutateElement. Would love to know if there's a better solution for this.

[aghassemi]

@jridgewell would it be okay to make an exception and allow amp-lightbox do setStyle (removing display:none) not in a mutate block? (and still call mutateElement later so runtime picks up the changes).

I personally can't think of a workaround for this iOS restriction (e.g. focus has to be a sync call following user-interaction and target of focus should be visible)

[jridgewell]

would it be okay to make an exception and allow amp-lightbox do setStyle (removing display:none) not in a mutate block? (and still call mutateElement later so runtime picks up the changes).

In this case, sure. Call #mutateElement with an empty function, and add a TODO for me to expose a better API.

[cathyxz]

More iOS isolated examples here:

1. Vanilla onClick focus works: https://codepen.io/cathyxz/pen/XELrjO
2. Promise with dom manipulation then focus works: https://codepen.io/cathyxz/pen/bMbypd
3. Promise waiting for setTimeout then focus does NOT work: https://codepen.io/cathyxz/pen/odvRpm
4. Promise with rAF then focus does NOT work: https://codepen.io/cathyxz/pen/QrLRvK
5. setTimeout focus does NOT work: https://codepen.io/cathyxz/pen/debEog

I couldn't find anything that exactly specifies what iOS does when programmatically triggering focus (no webkit bugs match this exact use case either), but I'll dig a bit more.

Some resources on the subject:
https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f
vuejs/vue#7546
https://stackoverflow.com/questions/12204571/mobile-safari-javascript-focus-method-on-inputfield-only-works-with-click

[cathyxz]

@jridgewell can we put this in a mutateElement block? I don't actually know why this still uses a vsync. I'm assuming that the original intention here was to queue this into the next rAF mutation.

So instead of calling mutateElement with an empty block, could we do this instead of the current vsync?

this.mutateElement(() => {
    st.setStyle(this.element, 'opacity', '');
});

Or do we need to nest this like so?

this.mutateElement(() => {
    this.mutateElement(() => {
        st.setStyle(this.element, 'opacity', '');
    });
});

[jridgewell]

We just need a #mutateElement call so that the measurement cache is busted. Anything will work, and if there's nothing that needs to be mutated, just use an empty function.

So, in this case, just a single mutate with a setStyle will do.

[cathyxz]

@jridgewell PTAL? =)

[jridgewell]

#14686.