[iOS 26.2] Suppressed virtual keyboard should show after tap on send box

[compulim]

Changelog Entry

Fixed

• Fixed virtual keyboard should show up on tap after being suppressed, in iOS 26.2, by @compulim in PR #5678

Description

We do suppress the virtual keyboard after tapping on the send button. This prevent the virtual keyboard from flashing. (show -> hide -> show)

The current suppression logic is by setting <input>/<textarea> to read-only, focus on it, then unset read-only.

However, this mechanism is broken in iOS 26.2.

We are moving to a modern mechanism via the inputmode attribute to hide virtual keyboard.

inputmode is supported since 2019. However, our original feature was build earlier than 2019, thus we are not using inputmode when we brew the feature.

Design

Background

When the inputmode attribute is set to none, the virtual keyboard will be hidden if the focus was on the <input>/<textarea>.

Otherwise, when the inputmode attribute is removed or set to a value other than none, the virtual keyboard will be shown if the <input>/<textarea> is focused.

Behavior

When the user tap on the send button and a message is being sent:

1. (Browser hide the virtual keyboard because the focus is on the send button, which is not an input field)
2. Web Chat set the send box with inputmode="none"
3. Web Chat send the focus back to the send box (from the send button)
   • Because the send box has inputmode="none", no virtual keyboard will be shown, i.e. no flashy

When the user tap on the send box again:

1. Web Chat remove inputmode attribute on the send box (or set it to inputmode="text")
2. (Browser will show the virtual keyboard)

Specific Changes

• Updated send box (single line, multiple line, and Fluent) to use inputmode to control show/hide virtual keyboard

• 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)