diff --git a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
index f7f9ca4315a71f03e7acb60b47e1a131fee064ce..719507d134116a8c9fae80f3fc4ee063686b1107 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_token_input.vue
@@ -59,19 +59,15 @@ export default {
     },
   },
   apollo: {
-    availableWorkItems: {
+    workspaceWorkItems: {
       query() {
         return this.isGroup ? groupWorkItemsQuery : projectWorkItemsQuery;
       },
       variables() {
-        return {
-          fullPath: this.fullPath,
-          searchTerm: '',
-          types: this.childrenType ? [this.childrenType] : [],
-        };
+        return this.queryVariables;
       },
       skip() {
-        return !this.searchStarted;
+        return !this.searchStarted || this.isSearchingByReference;
       },
       update(data) {
         return [
@@ -83,11 +79,29 @@ export default {
         this.error = sprintfWorkItem(I18N_WORK_ITEM_SEARCH_ERROR, this.childrenTypeName);
       },
     },
+    workItemsByReference: {
+      query: workItemsByReferencesQuery,
+      variables() {
+        return {
+          contextNamespacePath: this.fullPath,
+          refs: [this.searchTerm],
+        };
+      },
+      skip() {
+        return !this.isSearchingByReference;
+      },
+      update(data) {
+        return data.workItemsByReference.nodes;
+      },
+      error() {
+        this.error = sprintfWorkItem(I18N_WORK_ITEM_SEARCH_ERROR, this.childrenTypeName);
+      },
+    },
   },
   data() {
     return {
-      availableWorkItems: [],
-      query: '',
+      workspaceWorkItems: [],
+      searchTerm: '',
       searchStarted: false,
       error: '',
       textInputAttrs: {
@@ -96,6 +110,12 @@ export default {
     };
   },
   computed: {
+    availableWorkItems() {
+      return this.isSearchingByReference ? this.workItemsByReference : this.workspaceWorkItems;
+    },
+    isSearchingByReference() {
+      return isReference(this.searchTerm) || isSafeURL(this.searchTerm);
+    },
     workItemsToAdd: {
       get() {
         return this.value;
@@ -105,7 +125,10 @@ export default {
       },
     },
     isLoading() {
-      return this.$apollo.queries.availableWorkItems.loading;
+      return (
+        this.$apollo.queries.workspaceWorkItems.loading ||
+        this.$apollo.queries.workItemsByReference.loading
+      );
     },
     childrenTypeName() {
       return WORK_ITEMS_TYPE_MAP[this.childrenType]?.name;
@@ -113,6 +136,17 @@ export default {
     tokenSelectorContainerClass() {
       return !this.areWorkItemsToAddValid ? 'gl-inset-border-1-red-500!' : '';
     },
+    queryVariables() {
+      return {
+        fullPath: this.fullPath,
+        searchTerm: this.searchTerm,
+        types: this.childrenType ? [this.childrenType] : [],
+        in: this.searchTerm ? 'TITLE' : undefined,
+        iid: isNumeric(this.searchTerm) ? this.searchTerm : null,
+        searchByIid: isNumeric(this.searchTerm),
+        searchByText: true,
+      };
+    },
   },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
@@ -121,44 +155,6 @@ export default {
     getIdFromGraphQLId,
     async setSearchKey(value) {
       this.searchTerm = value;
-
-      // Check if it is a URL or reference
-      if (isReference(value) || isSafeURL(value)) {
-        const {
-          data: {
-            workItemsByReference: { nodes },
-          },
-        } = await this.$apollo.query({
-          query: workItemsByReferencesQuery,
-          variables: {
-            contextNamespacePath: this.fullPath,
-            refs: [value],
-          },
-        });
-
-        this.availableWorkItems = nodes;
-      } else {
-        // Query parameters for searching by text
-        let variables = {
-          searchTerm: this.searchTerm,
-          in: this.searchTerm ? 'TITLE' : undefined,
-          iid: null,
-          searchByIid: false,
-          searchByText: true,
-        };
-
-        // Check if it is a number, add iid as query parameter
-        if (this.searchTerm && isNumeric(this.searchTerm)) {
-          variables = {
-            ...variables,
-            iid: this.searchTerm,
-            searchByIid: true,
-          };
-        }
-
-        // Fetch combined results of search by iid and search by title.
-        this.$apollo.queries.availableWorkItems.refetch(variables);
-      }
     },
     handleFocus() {
       this.searchStarted = true;
@@ -178,7 +174,7 @@ export default {
     focusInputText() {
       this.$nextTick(() => {
         if (this.areWorkItemsToAddValid) {
-          this.$refs.tokenSelector.$el.querySelector('input[type="text"]').focus();
+          this.$refs.tokenSelector.focusTextInput();
         }
       });
     },
diff --git a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
index 8ad2a34055e38cc4c785a73eca7ece763de01192..f9ba34b3bb664e3e732d9fe49a50b0cda16a43c1 100644
--- a/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_token_input_spec.js
@@ -207,6 +207,8 @@ describe('WorkItemTokenInput', () => {
         await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith({
+          fullPath: 'test-project-path',
+          types: [WORK_ITEM_TYPE_ENUM_TASK],
           searchTerm,
           in: 'TITLE',
           iid,
@@ -232,6 +234,8 @@ describe('WorkItemTokenInput', () => {
         await waitForPromises();
 
         expect(emptyWorkItemResolver).toHaveBeenCalledWith({
+          fullPath: 'test-project-path',
+          types: [WORK_ITEM_TYPE_ENUM_TASK],
           searchTerm,
           in: 'TITLE',
           iid,