refactor(@dpc-sdp/ripple-ui-forms): use input instead of change event…

… for form_start event

now fires immediately instead of waiting for blur of the field

examples/nuxt-app/test/features/landingpage/forms-analytics.feature

@@ -7,7 +7,6 @@ Feature: Forms analytics events
     And the site endpoint returns fixture "/site/reference" with status 200
     Given I visit the page "/"
     When I type "Cat" into the input with the label "Last name"
-    When I blur the input with the label "Last name"
     Then the dataLayer should include the following events
       | event      | form_id   | form_name | component | platform_event |
       | form_start | full_form | Test form | rpl-form  | start          |

packages/ripple-test-utils/step_definitions/components/forms.ts

@@ -103,16 +103,6 @@ When(
   }
 )
 
-When('I blur the input with the label {string}', (label: string) => {
-  cy.get('label.rpl-form-label')
-    .contains(label)
-    .closest('.rpl-form__outer')
-    .as('field')
-
-  cy.get('@field').should('exist')
-  cy.get('@field').find('input').blur()
-})
-
 When(
   'I type {string} into the textarea with the label {string}',
   (value: string, label: string) => {

packages/ripple-ui-forms/src/components/RplForm/RplForm.vue

@@ -63,6 +63,7 @@ const emit = defineEmits<{
   (e: 'submit', payload: rplEventPayload & { action: 'submit' }): void
   (e: 'invalid', payload: rplEventPayload & { action: 'submit' }): void
   (e: 'submitted', payload: rplEventPayload & { action: 'complete' }): void
+  (e: 'start', payload: rplEventPayload): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-form', emit)
@@ -275,7 +276,7 @@ const plugins = computed(
     novalidate
     @submit-invalid="submitInvalidHandler"
     @submit="submitHandler"
-    @change="handleChange"
+    @input="handleChange"
   >
     <fieldset
       class="rpl-form__submit-guard"