1 files changed, 13 insertions, 4 deletions
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index 2ddb04e1eeb..68602068699 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -49,6 +49,11 @@ export default {
       type: Object,
       required: true,
     },
+    inputId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -84,6 +89,13 @@ export default {
     hasInvalidMembers() {
       return !isEmpty(this.invalidMembers);
     },
+    textInputAttrs() {
+      return {
+        'data-testid': 'members-token-select-input',
+        'data-qa-selector': 'members_token_select_input',
+        id: this.inputId,
+      };
+    },
   },
   watch: {
     // We might not really want this to be *reactive* since we want the "class" state to be
@@ -183,10 +195,7 @@ export default {
     :hide-dropdown-with-no-items="hideDropdownWithNoItems"
     :placeholder="placeholderText"
     :aria-labelledby="ariaLabelledby"
-    :text-input-attrs="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ {
-      'data-testid': 'members-token-select-input',
-      'data-qa-selector': 'members_token_select_input',
-    } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
+    :text-input-attrs="textInputAttrs"
     @blur="handleBlur"
     @text-input="handleTextInput"
     @input="handleInput"