iOS TextField, Compound emojis are being treated as many symbols

[etolstoy]

Describe the bug Compound emojis such as 👨‍👩‍👧‍👦 to a TextField aren't treated as a single symbol, as oppose to iOS native behavior. This affects deletion of such symbols and navigation using arrows on a physical keyboard.

https://user-images.githubusercontent.com/3955262/234074296-fc7e74f1-3084-4b47-9ba4-b4d144829894.MP4

(note that due to #3103 it removes two characters in a row instead of one with an on-screen keyboard)

Affected platforms

• iOS

Versions

• Kotlin version*: 1.8.20
• Compose Multiplatform version*: 1.4.0

[MatkovIvan]

Found some related info during investigation of another issue, so let me put here a few details that (I hope) will help:

1. This is iOS specific issue, on desktop it works just fine. The logic for iterate over symbols properly implemented on both JVM and native. See BreakIterator in skiko (TODO move to icu package)
2. The reason of it is that iOS calls not just deleteBackward method, but selects one symbol before it. It causes deleting selected area instead of deleting one emoji symbol.
3. Theoretically, proper iterating should be already supported by native UITextInputStringTokenizer by default, but somehing goes wrong here. I didn't found easy fix (but I soo hoped to do it) during my investigation.
4. It worth to note that flutter has a lot of workarounds in similar place, so PTAL before fixing it.

Formal unicode/ICU specs for it: Boundary Analysis, Grapheme Cluster Boundaries

cc @dima-avdeev-jb

[dima-avdeev-jb]

Done, will be available in next dev builds

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.