Maintenance: Mobile - Wait for form to focus before asserting focused element

app/frontend/shared/components/Form/Form.vue

@@ -152,6 +152,7 @@ const emit = defineEmits<{
   ): void
   (e: 'node', node: FormKitNode): void
   (e: 'settled'): void
+  (e: 'focused'): void
 }>()
 
 const showInitialLoadingAnimation = ref(false)
@@ -178,12 +179,16 @@ const findNodeByName = (name: string) => {
   return formNode.value?.find(name, 'name')
 }
 
-const autofocusFirstInput = () => {
+const autofocusFirstInput = (node: FormKitNode) => {
   nextTick(() => {
     const firstInput = getFirstFocusableElement(formElement.value)
 
     firstInput?.focus()
     firstInput?.scrollIntoView({ block: 'nearest' })
+
+    const formName = node.context?.id || node.name
+    testFlags.set(`${formName}.focused`)
+    emit('focused')
   })
 }
 
@@ -214,11 +219,11 @@ const setFormNode = (node: FormKitNode) => {
       testFlags.set(`${formName}.settled`)
       emit('settled')
 
-      if (props.autofocus) autofocusFirstInput()
+      if (props.autofocus) autofocusFirstInput(node)
     })
   })
 
-  node.on('autofocus', autofocusFirstInput)
+  node.on('autofocus', () => autofocusFirstInput(node))
 
   emit('node', node)
 }

spec/support/capybara/test_flags.rb

@@ -18,6 +18,10 @@ module TestFlags
   def wait_for_form_updater(form_updater_call_number = 1)
     wait_for_gql('shared/components/Form/graphql/queries/formUpdater.graphql', number: form_updater_call_number)
   end
+
+  def wait_for_form_autofocus(form)
+    wait_for_test_flag("#{form}.focused")
+  end
 end
 
 RSpec.configure do |config|

spec/system/apps/mobile/tickets/ticket_create_spec.rb

@@ -263,6 +263,7 @@ RSpec.describe 'Mobile > Ticket > Create', app: :mobile, authenticated_as: :user
 
   context 'with accessibility support' do
     it 'focuses first visible field when switching between steps' do
+      wait_for_form_autofocus('ticket-create')
 
       # Step 1.
       check_is_focused find_input('Title').input_element