Repository: flutter
Issue: SelectionControls position changes after selecting lengthy / scrollable text in Textfield.
Labels: a: text input,framework,f: material design,a: quality,a: typography,has reproducible steps,found in release: 2.2,team-design,triaged-design

## Use case

when text is overflow the max height of TextField, select all text will cause the SelectionControls to show at a location far away from the TextField.

the code for this case:
```

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final _textEditingController = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    var text = _textEditingController.text;
    var insertion = '[大笑]';
    TextSelection selection = _textEditingController.selection;
    if (selection.start == selection.end && selection.start == -1) {
      _textEditingController.text = text + insertion;
    } else {
      _textEditingController.text =
          text.replaceRange(selection.start, selection.end, insertion);
    }
    _textEditingController.selection = TextSelection.fromPosition(
      TextPosition(offset: selection.end + insertion.length),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            TextField(
              controller: _textEditingController,
              minLines: 1,
              maxLines: 4,
              selectionHeightStyle: BoxHeightStyle.max,
              decoration: InputDecoration(border: OutlineInputBorder()),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

```
## Proposal
is it better for the SelectionControls to show close with the TextField?
![image](https://user-images.githubusercontent.com/19642118/119116228-9dab3c00-ba5a-11eb-95ae-b61cc98eb1b0.png)

and when we long pressed the text, SelectionControls shows, and scroll the text out of visible, then SelectionControls still shows

![image](https://user-images.githubusercontent.com/19642118/119117093-79039400-ba5b-11eb-8187-f64a6e30d7ce.png)