Fix JS error on welcome page

The input field for "other" role only gets rendered when the feature
flag is active. Therefore we need to check if it exists when we receive
a `change` event on the select box.

app/views/registrations/welcome/show.html.haml

@@ -20,7 +20,6 @@
             .form-group.col-sm-12.js-other-role-group{ class: ("hidden") }
               = f.label :other_role, _('What is your job title? (optional)'), class: 'form-check-label gl-mb-3'
               = f.text_field :other_role, class: 'form-control'
-        - else
         .row
           .form-group.col-sm-12
             .form-text.gl-text-gray-500.gl-mt-0.gl-line-height-normal.gl-px-1= _('This will help us personalize your onboarding experience.')

ee/app/assets/javascripts/registrations/welcome/other_role.js

-const role = document.querySelector('.js-user-role-dropdown');
 const otherRoleGroup = document.querySelector('.js-other-role-group');
 
-role.addEventListener('change', () => {
-  const enableOtherRole = role.value === 'other';
+if (otherRoleGroup) {
+  const role = document.querySelector('.js-user-role-dropdown');
 
-  otherRoleGroup.classList.toggle('hidden', !enableOtherRole);
-});
+  const showOtherRoleGroup = () => {
+    const enableOtherRole = role.value === 'other';
+    otherRoleGroup.classList.toggle('hidden', !enableOtherRole);
+  };
 
-role.dispatchEvent(new Event('change'));
+  role.addEventListener('change', showOtherRoleGroup);
+  showOtherRoleGroup();
+}

ee/changelogs/unreleased/nicolasdular-fix-other-role-select-js-error.yml

+---
+title: Fix JS error on welcome page
+merge_request: 52022
+author:
+type: fixed