Fix done button click not blur in iOS keyboard

[JunbinDeng]

• [Web] TextField preventing tap on other widgets in Safari flutter#96357

And besides I found the following issue is related to TextField focus:

• [IOS] TextField Focus doesn't work correctly on the web flutter#91755

This commit resolves iOS virtual keyboard glitch and TextField focus issue in Safari. When tapping the done button above the keyboard, TextField blurs and closes the keyboard right away instead of refocusing and reopening afterward.

Pre-launch Checklist

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• I read the [Tree Hygiene] wiki page, which explains my responsibilities.
• I read and followed the [Flutter Style Guide] and the [C++, Objective-C, Java style guides].
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See [testing the engine] for instructions on
  writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the [CLA].
• All existing and new tests are passing.

[justinmc]

CC @mdebbar

[mdebbar]

Could you elaborate a little more about how this PR fixes the clicks on "done"?

[JunbinDeng]

Could you elaborate a little more about how this PR fixes the clicks on "done"?

Thanks for reviewing. In the beginning, I found that taping the 'done' button above the soft input in iOS Safari was not working correctly as the keyboard closed and opened up again.

When pressing the 'done' button, the event listener 'onblur' should trigger a callback then the keyboard should be closed normally. The reason why the keyboard kept opening up was that the window was still on focus.

I was trying to remove everything except 'owner.sendTextConnectionClosedToFrameworkIfAny' in the 'onblur' listener callback. But a new problem occurred, which was tapping the TextInput could not bring up the keyboard occasionally.

I figured out the 'onblur' listener callback was triggered, as long as the listener had set up after a while. It should call by mistake.

Having tested several times, I found that the intervals between the 'onblur' event listener registered and callback triggered were below 200ms.

It was considered a fast callback, which should regain focus instead of blur.

Please let me know if there's any other way I can do better.

[mdebbar]

Thanks for the explanation!

I'm still trying to understand the "fast callback". Here's my understanding of the sequence of things:

The onblur event listener is registered when the text field is created (which happens when you tap on it for the first time). And the onblur event is triggered when you click the "done" button.

Why does the duration between these two things matter? And in what situation does the onblur trigger immediately after subscription?

[JunbinDeng]

Thanks for the explanation!

I'm still trying to understand the "fast callback". Here's my understanding of the sequence of things:

The onblur event listener is registered when the text field is created (which happens when you tap on it for the first time). And the onblur event is triggered when you click the "done" button.

Why does the duration between these two things matter? And in what situation does the onblur trigger immediately after subscription?

It could be more clear to deduce matters in this way.

The current situation:

1. Tap the TextField
2. Set up the blur listener
3. Trigger the blur listener callback immediately (should not happen)
4. Yes, the window has the focus
5. Keep showing the keyboard

The current keyboard action:

1. Press the 'done' button
2. The keyboard is hiding
3. Trigger the blur listener callback
4. Yes, the window has the focus
5. The keyboard shows up (unable to hide)

If we apply the 'fast callback' solution, then:

1. Tap the TextField
2. Set up the blur listener
3. Trigger the blur listener callback immediately (should not happen)
4. Yes, a 'fast callback'
5. Keep showing the keyboard

The solved keyboard action:

1. Press the 'done' button
2. The keyboard is hiding
3. Trigger the blur listener callback
4. No, not a 'fast callback'
5. The keyboard hides

Hopefully can answer your questions.

[mdebbar]

Thanks for the great explanation! I added a suggestion on how to incorporate it in the doc comments. Feel free to re-phrase it if needed.

[JunbinDeng]

Thanks for the great explanation! I added a suggestion on how to incorporate it in the doc comments. Feel free to re-phrase it if needed.

I appreciate the time and effort you have spent to share your insightful comments, which will be helpful to improve code readability.

[mdebbar]

Thanks for contributing this fix to the flutter web engine!

[fluttergithubbot]

This pull request is not suitable for automatic merging in its current state.

• Please get at least one approved review if you are already a member or two member reviews if you are not a member before re-applying this label. Reviewers: If you left a comment approving, please use the "approve" review action instead.

[yjbanov]

[justinmc]

LGTM 👍

Just some small nits for my opinion on making the docs more readable, but it's up to you.

[JunbinDeng]

LGTM 👍

Just some small nits for my opinion on making the docs more readable, but it's up to you.

Thanks for your suggestion. I've done it.