[web]: SelectableText/EditableText with nested TextSpans cannot select on web #61992
Description
I have this widget:
SelectableText.rich(
TextSpan(children: [
TextSpan(text: 'foo bar ', style: TextStyle(color: Colors.black)),
TextSpan(text: 'baz qux', style: TextStyle(color: Colors.green)),
]),
textAlign: TextAlign.center,
toolbarOptions: ToolbarOptions(cut: true),
showCursor: true,
)
Expected: selection works
Actual: on web, selection fails with the output below.
There is no error when there is only a single (un-nested) TextSpan as the SelectableText.rich parameter.
Note that when the TextSpan does not have a style (TextSpan style param in constructor is null), there is no problem.
Below, when _cutAndPastedTextStyle/_cutTextStyle/_pastedTextStyle/_defaultTextStyle are null, then selection works. Once they are set to a TextStyle value, selection breaks.
TextSpan _generateTextSpan() {
assert(_words != null);
assert(_words.isNotEmpty);
TextStyle styleForWord(_TranscriptEditorWord word) {
if (word.isCut && word.isPasted) {
return _cutAndPastedTextStyle;
} else if (word.isCut) {
return _cutTextStyle;
} else if (word.isPasted) {
return _pastedTextStyle;
} else {
return _defaultTextStyle;
}
}
final childSpans = _words
.map((transcriptEditingWord) => TextSpan(
text: '${transcriptEditingWord.assetTranscriptWord.word}' +
// Add trailing space after each word, except for the last word.
(transcriptEditingWord == _words.last ? '' : ' '),
style: styleForWord(transcriptEditingWord)))
.toList();
return TextSpan(children: childSpans);
}