Hang when typing :smile and trying to iterate through the remaining emojis with <Tab>

[dbkr]

Think this one is probably safe as a p1 critical given it takes out the whole app

[lampholder]

This is an odd one, and I think if I had better listened to @t3chguy on Thursday I might have more of an idea of its cause.

More details:

• I can reliably reproduce this with:
  • test user @ isobelle.mtp:matrix.org
  • on my mac
  • on /app and /staging
  • for her, any tabbing through the autocomplete list (emoji or room members) results in instakill of Riot (the app locks up, then the tab chrome illfaces, then the browser becomes permanently locked up if you wait long enough).
• Other users (on the same app version, also on a mac, in the same room) don't have the same issue, even tab-completing on the same usernames
• @ isobelle.mtp:matrix.org doesn't have a problem on my ubuntu machine

[dbkr]

I've spent quite a while looking into this. Conclusions so far:

• It is causing some kind of infinite loop within the slate normalisation process. It also triggers the warning about specifying a range that isn't a text node (one of the lower-down slate calls does this, not us). The code causing this is the emojione-ification of emoji in the composer: if you comment out this block, it's all fine.
• If you update the a newer version of slate, it breaks the autocompleter altogether. It looks like this is related to how slate emits onChange events. The autocompleter is dismissed because it's query ends up being one of the literal emoji suggestions rather than the text :smile: at which point there are no results.

[dbkr]

I finally got somewhere with this: it's caused by the originalEditorState (which is the editor state unfettered by the current autocomplete suggestion) being set back to null by an onChange event. With new slate (0.36.1) this manifests as the autocomplete just accepting the first suggestion and disappearing when you hit tab, but with older slate causes in infinite loop for reasons I don't fully understand. The patch below fixes it, but also prevents the autocomplete from going away when you resume typing. If we can find the right place to clear originalEditorState (ie. declare that what is in the composer is now the text the user wants and autocomplete can go away) then this feels like the solution here.

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 267db89e8..971e0e2c5 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -613,7 +613,7 @@ export default class MessageComposerInput extends React.Component {
 
         this.setState({
             editorState,
-            originalEditorState: originalEditorState || null
+            originalEditorState: originalEditorState || this.state.originalEditorState,
         });
     };

[Edu4rdSHL]

Here is the debug of the issue in Firefox:

Web Console:

Warning: The range anchor was set to a Node that is not a Text node. This should not happen and can degrade performance. 
The node in question was: Object { _map: {…}, __ownerID: undefined, __cache_key: 0, __cache: Map(0), __cache_no_args: {…} } rageshake.js:66:16

It's the stack trace when i stop the script hanging firefox:

Error: Script terminated by timeout at:
n/e[t]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:16354
remove_node@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:12916
P@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:23294
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:15846
Ge.removeNodeByKey@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:15:7880
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:16193
vt.prototype[e]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:17143
validateNode/</<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:15:15269
Be.prototype.__iterate@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:19:15153
forEach@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:19:27799
validateNode/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:15:15247
r@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:22270
r@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:22585
M@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:22629
A@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:22160
A@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:22019
pt.normalizeNodeByKey@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:10458
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:16193
vt.prototype[e]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:17143
qe.insertInlineAtRange@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:14:27905
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:16193
vt.prototype[e]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:17143
Be/this.onChange/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:8482
Be.prototype.__iterate@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:19:15153
forEach@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:19:27799
Be/this.onChange@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:8174
Be/this.setDisplayedCompletion</t<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:18842
o@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:1:14521
e.exports/e.method/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:42:30793
Be/this.setDisplayedCompletion</<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:18889
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:75:13631
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:75:12883
Be/this.moveAutocompleteSelection@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:17478
t/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:17267
r@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:88:8224
u/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:88:9271
s/</e[t]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:88:8400
o@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:1:14521
e.exports/l.prototype._promiseFulfilled@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:42:20365
e.exports/e.coroutine/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:42:22211
Be/this.onTab</<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:17378
Be/this.onKeyDown@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:161:9736
a/i[t]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:24954
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:15:18790
Ge/this.onEvent/<@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:24617
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:16:16193
Ge/this.change@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:24386
Ge/this.onEvent@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:24596
t/</n[e]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:22428
value@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:19956
t/</n[e]@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:176:18928
r@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:54:10724
a@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:54:6772
s@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:54:6989
p@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:29:17604
h@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:29:17732
n@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:77:22644
processEventQueue@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:29:18810
r@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:171:225
handleTopLevel@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:171:329
i@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:171:757
perform@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:40:25413
batchedUpdates@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:77:14195
i@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:12:11514
dispatchEvent@https://riot.im/app/bundles/1f9498dc730a5bf463e6/bundle.js:171:1622
 memoize.js:59:41

[koalalorenzo]

I have the same on Electron also when I am tagging an user. The app totally freezes

Warning: The range anchor was set to a Node that is not a Text node. This should not happen and can degrade performance. The node in question was: t {_map: fe, __ownerID: undefined, __cache_key: 0, __cache: Map(0), __cache_no_args: {…}}

[astrojuanlu]

Using <Tab> is such an automatic thing for me, so I crashed my browser a handful of times in the past days...

[lboklin]

It also happens to me when selecting emoji with the pointer.