Focus should not blur briefly after tapping on a suggested action

[compulim]

Fixes #5050.

Changelog Entry

Fixed

• Fixes #5050. Fixed focus should not blur briefly after tapping on a suggested action, by @compulim, in PR #5097

Description

After tapping on a suggested action, the focus is blurred briefly before sending to the send box.

This pull request resolves the issue by sending the focus to the send box, wait for focus send complete, then, send the card action and remove the suggested action.

Design

Today:

1. Tap on the send box
2. Remove suggested actions
   1. Suggested actions will be unmounted
   2. Focus is blurred
3. Focus on the send box (without virtual keyboard)
   1. Set send box to read-only
   2. Idle (setTimeout(..., 0))
   3. Focus on send box
   4. Set send box to read-write

There are 2 parts we need to modify:

• Move point 3 before point 2
  • Focus on the send box before removing suggested action
• Make sure point 3 is completed before executing point 2

However, iOS 17 does not support navigator.virtualKeyboard API. We have to use the readonly attribute trick to focus on the send box while preventing the keyboard to show up. This will keep the focus on the send box without showing the virtual keyboard.

To ensure point 3 is awaitable, we are extending by following the ExtendableEvent.waitUntil pattern.

Specific Changes

• Modify SuggestedAction.tsx to move the focus before sending and unmounting suggested action
• Modify TextBox.tsx to add waitUntil() to signal the completion of focus change
• Added type-fest as development dependencies to component package

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)