Add ability to enter number in related issues

When a user types an issue number
we will now prepend a # sign to support
atjs autocomplete

app/assets/javascripts/related_issues/components/related_issues_root.vue

@@ -204,7 +204,16 @@ export default {
     onInput({ untouchedRawReferences, touchedReference }) {
       this.store.addPendingReferences(untouchedRawReferences);
 
-      this.inputValue = `${touchedReference}`;
+      this.formatInput(touchedReference);
+    },
+    formatInput(touchedReference = '') {
+      const startsWithNumber = String(touchedReference).match(/^[0-9]/) !== null;
+
+      if (startsWithNumber) {
+        this.inputValue = `#${touchedReference}`;
+      } else {
+        this.inputValue = `${touchedReference}`;
+      }
     },
     onBlur(newValue) {
       this.processAllReferences(newValue);

changelogs/unreleased/ss-related-issues-autocomplete.yml

+---
+title: 'Add ability to type a number in related issues and prepend #'
+merge_request: 48952
+author:
+type: changed

spec/frontend/issuable/related_issues/components/related_issues_root_spec.js

@@ -280,7 +280,7 @@ describe('RelatedIssuesRoot', () => {
         const input = 'asdf/qwer#444 #12 ';
         wrapper.vm.onInput({
           untouchedRawReferences: input.trim().split(/\s/),
-          touchedReference: 2,
+          touchedReference: '2',
         });
 
         expect(wrapper.vm.state.pendingReferences).toHaveLength(2);
@@ -292,13 +292,37 @@ describe('RelatedIssuesRoot', () => {
         const input = 'something random ';
         wrapper.vm.onInput({
           untouchedRawReferences: input.trim().split(/\s/),
-          touchedReference: 2,
+          touchedReference: '2',
         });
 
         expect(wrapper.vm.state.pendingReferences).toHaveLength(2);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('something');
         expect(wrapper.vm.state.pendingReferences[1]).toEqual('random');
       });
+
+      it('prepends # when user enters a numeric value [0-9]', async () => {
+        const input = '23';
+
+        wrapper.vm.onInput({
+          untouchedRawReferences: input.trim().split(/\s/),
+          touchedReference: input,
+        });
+
+        expect(wrapper.vm.inputValue).toBe(`#${input}`);
+      });
+
+      it('prepends # when user enters a number', async () => {
+        const input = 23;
+
+        wrapper.vm.onInput({
+          untouchedRawReferences: String(input)
+            .trim()
+            .split(/\s/),
+          touchedReference: input,
+        });
+
+        expect(wrapper.vm.inputValue).toBe(`#${input}`);
+      });
     });
 
     describe('onBlur', () => {