Form updates break character composition mode in Safari

[woylie]

It appears that form updates break the character composition mode for Japanese input sources (and potentially other input sources with character composition) in Safari under certain conditions.

Environment

• Elixir version (elixir -v): 1.17.1
• Phoenix version (mix deps): 1.7.14
• Phoenix LiveView version (mix deps): observed from 0.20.2 to 1.0.0-rc.5 (didn't test older versions)
• Operating system: macOS Sonoma 14.5 (23F79)
• Browsers you attempted to reproduce this bug on (the more the merrier): Safari 17.5 (19618.2.12.11.6); issue does not occur in Chrome 126.0.6478.63 or Firefox 127.0.1
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: there is no node modules folder

Setup

The demo application (https://github.com/woylie/jp_input) was generated with mix phx.server and mix phx.gen.live.
Other than replacing type="text" with type="textarea", no changes were made.

1. git clone https://github.com/woylie/jp_input
2. cd jp_input
3. mix setup
4. mix phx.server
5. Add Japanese - Romaji as an input source as described here: https://support.apple.com/guide/japanese-input-method/set-up-the-input-source-jpim10267/mac

Reproduction

1. Open http://localhost:4000/things in Safari.
2. Switch to the Japanese input source.
3. Click Edit on the existing thing.
4. Place the cursor at the end of the first line and hit return to create a new line in the middle.
5. Type d and then e.

What should happen

• After typing d, the letter d should appear in the textarea with a thick underline.
• After typing e, the letter d in the textarea should be replaced with a で.
• After hitting return to confirm the character, the underline disappears.

The thick underline indicates character composition mode, in which you can choose different candidates with the space key.

What really happens

• After typing d, the letter d appears in the textarea without the underline.
• After typing e, the character え (e) appears in the textarea. The textarea now contains the text dえ instead of で.

Observations

• If you set the cursor before the existing text or in the line after the existing text, character composition works. This is only an issue in the middle of the existing text.
• If you remove the existing text and start typing, character composition works. If you save the changes and open the modal again, the issue comes back.
• If you open http://localhost:4000/things/1/edit directly instead of opening the modal with the Edit link, character composition works.
• This is also an issue if the existing text only has latin characters.
• After removing phx-change from the form, the issue disappears.

Resources

• https://support.apple.com/guide/japanese-input-method/set-up-the-input-source-jpim10267/mac
• https://support.apple.com/guide/japanese-input-method/switch-the-input-source-jpimf6ffb247/mac
• https://support.apple.com/guide/japanese-input-method/enter-japanese-text-jpim10265/6.3/mac/14.0

[woylie]

More resources regarding IMEs and JavaScript:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event#keydown_events_with_ime
• https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

[SteffenDE]

@woylie can you please try {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "sd-input-composition", override: true}?

[SteffenDE]

I'm not familiar with composition mode, but the idea is to skip sending an event to the server while compositing and only trigger the regular phx-change after it is finished.

[woylie]

Confirmed working!