diff --git a/extensions/emoji/js/src/forum/addComposerAutocomplete.js b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
index a717a0bc2..b465bb20d 100644
--- a/extensions/emoji/js/src/forum/addComposerAutocomplete.js
+++ b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
@@ -7,22 +7,21 @@ import TextEditorButton from 'flarum/components/TextEditorButton';
 import getEmojiIconCode from './helpers/getEmojiIconCode';
 import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable';
 
-import AutocompleteDropdown from './components/AutocompleteDropdown';
+import AutocompleteDropdown from './fragments/AutocompleteDropdown';
 
 export default function addComposerAutocomplete() {
   const emojiKeys = Object.keys(emojiMap);
 
-  extend(TextEditor.prototype, 'config', function(original, isInitialized) {
-    if (isInitialized) return;
+  extend(TextEditor.prototype, 'oncreate', function() {
 
     const $container = $('<div class="ComposerBody-emojiDropdownContainer"></div>');
-    const dropdown = new AutocompleteDropdown({items: []});
+    const dropdown = new AutocompleteDropdown();
     const $textarea = this.$('textarea').wrap('<div class="ComposerBody-emojiWrapper"></div>');
     let emojiStart;
     let typed;
 
     const applySuggestion = (replacement) => {
-      this.props.composer.editor.replaceBeforeCursor(emojiStart - 1, replacement + ' ');
+      this.attrs.composer.editor.replaceBeforeCursor(emojiStart - 1, replacement + ' ');
 
       dropdown.hide();
     };
@@ -125,7 +124,7 @@ export default function addComposerAutocomplete() {
               })).map(makeSuggestion);
 
             if (suggestions.length) {
-              dropdown.props.items = suggestions;
+              dropdown.items = suggestions;
               m.render($container[0], dropdown.render());
 
               dropdown.show();
@@ -158,7 +157,7 @@ export default function addComposerAutocomplete() {
 
   extend(TextEditor.prototype, 'toolbarItems', function(items) {
     items.add('emoji', (
-      <TextEditorButton onclick={() => this.props.composer.editor.insertAtCursor(':')} icon="far fa-smile">
+      <TextEditorButton onclick={() => this.attrs.composer.editor.insertAtCursor(':')} icon="far fa-smile">
         {app.translator.trans('flarum-emoji.forum.composer.emoji_tooltip')}
       </TextEditorButton>
     ));
diff --git a/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js b/extensions/emoji/js/src/forum/fragments/AutocompleteDropdown.js
similarity index 79%
rename from extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
rename to extensions/emoji/js/src/forum/fragments/AutocompleteDropdown.js
index 978eff018..ddabb97b7 100644
--- a/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
+++ b/extensions/emoji/js/src/forum/fragments/AutocompleteDropdown.js
@@ -1,17 +1,16 @@
-import Component from 'flarum/Component';
+import Fragment from 'flarum/Fragment';
 
-export default class AutocompleteDropdown extends Component {
-  init() {
-    this.active = false;
-    this.index = 0;
-    this.keyWasJustPressed = false;
-  }
+export default class AutocompleteDropdown extends Fragment {
+  items = [];
+  active = false;
+  index = 0;
+  keyWasJustPressed = false;
 
   view() {
     return (
       <ul className="Dropdown-menu EmojiDropdown">
-        <li className="Dropdown-header" key="0">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
-        {this.props.items.map(item => <li key={item.attrs.key}>{item}</li>)}
+        <li className="Dropdown-header">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
+        {this.items.map(item => <li key={item.attrs.key}>{item}</li>)}
       </ul>
     );
   }
@@ -72,7 +71,7 @@ export default class AutocompleteDropdown extends Component {
       }
 
       if (typeof scrollTop !== 'undefined') {
-        $dropdown.stop(true).animate({scrollTop}, 100);
+        $dropdown.stop(true).animate({ scrollTop }, 100);
       }
     }
   }