If you type some text and then a complex emoji, the caret will stay at the start of the emoji rather than move to the end.

This resembles #50563, #98516, and #118403, but the symptoms are subtly different, and the fix is unrelated although it's in a nearby part of the code. (I'll be sending a PR with both fixes soon.)

Steps to Reproduce

1. Go to any ordinary text input field in a Flutter app, such as the code sample below. Use a device where you can easily input emoji.
2. Type the letters "abc", then a complex emoji like "👩‍🚀". (A simple emoji like "👍" won't show the issue; details below.)
3. Type some more text.

Expected results:

The cursor (aka caret) moves to the end of each character you type.

All the text you type is shown in the order you typed it.

Actual results:

On typing the emoji, the cursor stays at the start of the emoji.

On typing more text, the cursor jumps back to the end. All the text you type is correctly shown in the order you typed it. So this shows that the underlying text input state knows the cursor should be at the end, and we're just painting it in the wrong place.

Repro details

In order to trigger the issue, the emoji's length in UTF-16 code units has to not be a power of 2: it has to be something other than 1, 2, 4, 8, etc. The simplest emoji are 1 or 2 code units long and don't trigger the issue. Most emoji that have a gender or skin-color modifier, or show a family or make other use of the zero-width joiner code point, do trigger the issue.

The repro may depend on the fonts you have on the device. I observe it on a Pixel 5 running Android 13, and on an iPhone 7 running iOS 15.

If you type "a👩‍🚀" or "ab👩‍🚀" instead of "abc👩‍🚀", then when you type the emoji, the behavior is still wrong but with a different symptom: the cursor will jump backward to the beginning, instead of staying at the start of the emoji. This symptom is caused by #50563.

import 'package:flutter/material.dart';

void main() {
  runApp(DemoApp());
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "Demo app", home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo app")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TextField(maxLines: null),
          ElevatedButton(
              onPressed: () => FocusScope.of(context).unfocus(),
              child: Text('Unfocus'),
          ),
        ],
      ),
    );
  }
}

Video: