Amphtml: input.focus is not working on iOS on a default `hidden` element

[leonalicious]

Good Day there, I have created a demo , please play around with iOS device, by clicking on the button, it will do the following 2 actions

1. show the element which wraps the input
2. set focus on the input

As you can see, on the first click attempt on the button, the focus is not working as expected while it will only work on the second attempt.

[aghassemi]

@leonalicious Thanks for the report. The root cause of this bus is that
1- iOS never focuses hidden elements
2- Our hide/show is actually asynchronous (because of batch mutations for performance) but focus is synchronous so focus is actually happening before show!

I will try to find a way to batch focus with the rest of mutations.

[aghassemi]

I am trying to find a workaround for this, but not luck so far. Not only iOS does not focus if input is hidden, trying to focus after input is displayed only works if it is directly tied to the same stack that displayed the item.

[aghassemi]

We managed to make this happen with amp-lightbox but I am not sure if we can with actions or amp-bind as expression parsing and mutations are scheduled with a timer

[leonalicious]

that one of the reasons we would suggest the actions/events can be chained like promise based on sequence , similar issue we have bumped into, FYI amp-list: Unsynchronized rendering in action sequences

[aghassemi]

@leonalicious we may need to special case this for show action, supporting bind is much tricker since expression parsing in asynch as well.. Would that work for you? Essentially support autofocus attribute in any section that gets displayed via show() action. No need to call focus() manually

[aghassemi]

Chaining doesn't fully solve this in iOS, unlike other things that require user-interaction like playing unmuted video which honors the call chain, focus seems to be a lot more restrict and doesn't seem to follow the same logic. For example, playing unmuted video works even if the initial tap is tied to bunch of promises or even postMessage, focus does not.

[leonalicious]

okay, actually i have tried it with amp-bind + <textarea> as <input> is not supporting [autofocus], but seems like textarea will not be focus with amp-bind on iOS either

[aghassemi]

I am fairly confident we can make show() and autofocus work together (same way we did for lightbox). Would that work for you or do you have to use bind for toggling visibility?

[leonalicious]

yes, it will work for us, we are not using bind for toggling the visibility, we will only input-wrap.show, inputFocus.focus, anyway, moving forward will input support [autofocus] too ?

[aghassemi]

[autofocus] should be doable but let me fix show first though as there isn't a need for [autofocus] yet.

[leonalicious]

yeap, agreed with you. appreciate it, thank you

[leonalicious]

@aghassemi any idea when will this be available, please?

[aghassemi]

@leonalicious sorry this did make it in the last Fix it week, we are doing another week of bug fixes in 2 weeks, so ~4 weeks to prod? (If this is more urgent from your side, please let me know)

[leonalicious]

actually everything for us is quite urgent, haha.

How about lets treat it as , do you think this bug fixed is risky ? if it is risky, we should take 2 weeks + 2 weeks to ensure its stability, else why let's roll it out earlier ~

[aghassemi]

I don't think it's risky. It just resourcing and prioritization against other work. We will do our best to get it in soon.

[leonalicious]

Sure , thank you ali , appreciate it

[ampprojectbot]

This issue doesn't have a category which makes it harder for us to keep track of it. @aghassemi Please add an appropriate category.

[ampprojectbot]

This issue doesn't have a category which makes it harder for us to keep track of it. @aghassemi Please add an appropriate category.

[alanorozco]

@leonalicious

From this current dev channel onwards, the show/toggleVisibility actions will autofocus a corresponding element.

Please note that in an explicit show-action chain, e.g. on="tap: my-container.show, my-input.focus, iOS may actually blur the autofocused element, so it's important to remove the explicit focus call (my-input.focus) and let the autofocus attribute do the work.

Feel free to try the feature out in canary and let me know if anything is not working as expected! :)

[leonalicious]

@alanorozco , thank you for the update, okay, will it work also for issue https://github.com/ampproject/amphtml/issues/13332 ?

[alanorozco]

@leonalicious lightbox was not fixed, but could your use-case be fulfilled by a show action?

/cc @aghassemi

[aghassemi]

Lightbox is fixable (for cases when there is no animate-in configuration), @leonalicious my understanding was you are not using lightbox and your priority is getting this working for show action for the search autocomplete use-case.

[leonalicious]

hey @aghassemi , we would need to use this autofocus approach on Home page
BUT we are still using the lightbox approach on other pages, for instance Search List