Update Streamfield sequence focus code to support Draftail

client/src/components/Draftail/index.js

@@ -83,7 +83,10 @@ export const initEditor = (fieldName, options = {}) => {
     />
   );
 
-  ReactDOM.render(editor, editorWrapper);
+  const draftailEditor = ReactDOM.render(editor, editorWrapper);
+
+  // Bind editor instance to its field so it can be accessed imperatively elsewhere.
+  field.draftailEditor = draftailEditor;
 };
 
 registry.registerSources({

wagtail/admin/rich_text/editors/draftail/__init__.py

@@ -34,6 +34,11 @@ class DraftailRichTextArea(WidgetWithScript, widgets.HiddenInput):
         super().__init__(*args, **kwargs)
 
     def render(self, name, value, attrs=None):
+        if attrs is None:
+            attrs = {}
+
+        attrs['data-draftail-input'] = True
+
         if value is None:
             value = ''
 

wagtail/admin/static_src/wagtailadmin/js/blocks/sequence.js

@@ -53,7 +53,14 @@ CODE FOR SETTING UP SPECIFIC UI WIDGETS, SUCH AS DELETE BUTTONS OR MENUS, DOES N
 
             // focus first suitable input found
             var timeout = setTimeout(function() {
-                $('.input input,.input textarea,.input .halloeditor', self.container).first().trigger('focus');
+              var $input = $('.input', self.container);
+              var $firstField = $('input, textarea, .halloeditor, [data-draftail-input]', $input).first();
+
+              if ($firstField.is('[data-draftail-input]')) {
+                $firstField.get(0).draftailEditor.focus();
+              } else {
+                $firstField.trigger('focus');
+              }
             }, 250);
         };