diff --git a/app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue b/app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue
index ce32584a86198362abafb6f044fd8f9f27c0fa91..2c6fbe4602fe8504112da8bb638e6b944ddffd87 100644
--- a/app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue
+++ b/app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue
@@ -116,6 +116,10 @@ export default {
     refShortName() {
       return this.refValue.shortName;
     },
+    refQueryParam() {
+      return this.refFullName || this.refShortName;
+    },
+
     shouldShowWarning() {
       return this.warnings.length > 0 && !this.isWarningDismissed;
     },
@@ -256,7 +260,7 @@ export default {
         :file-params="fileParams"
         :is-maintainer="isMaintainer"
         :project-path="projectPath"
-        :ref-param="refFullName"
+        :ref-param="refQueryParam"
         :settings-link="settingsLink"
         :variable-params="variableParams"
         @variables-updated="handleVariablesUpdated"
diff --git a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
index 1e99ffbf0619b48340934d373700f19796835e44..f0b8ad26548e56f091a81b4a49c056d270fad7bd 100644
--- a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
@@ -159,12 +159,10 @@ describe('Pipeline New Form', () => {
 
   describe('Pipeline variables form', () => {
     describe('when user has permission to view variables', () => {
-      beforeEach(async () => {
+      it('renders the pipeline variables form component', async () => {
         pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
         await createComponentWithApollo();
-      });
 
-      it('renders the pipeline variables form component', () => {
         expect(findPipelineVariablesForm().exists()).toBe(true);
         expect(findPipelineVariablesForm().props()).toMatchObject({
           isMaintainer: true,
@@ -174,6 +172,9 @@ describe('Pipeline New Form', () => {
       });
 
       it('passes variables to the create mutation', async () => {
+        pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+        await createComponentWithApollo();
+
         const variables = [{ key: 'TEST_VAR', value: 'test_value' }];
         findPipelineVariablesForm().vm.$emit('variables-updated', variables);
         findForm().vm.$emit('submit', dummySubmitEvent);
@@ -187,6 +188,24 @@ describe('Pipeline New Form', () => {
           },
         });
       });
+
+      describe('ref param', () => {
+        it('provides refParam as ref.fullName when available', async () => {
+          pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+          await createComponentWithApollo();
+
+          expect(findPipelineVariablesForm().props('refParam')).toBe(
+            `refs/heads/${defaultProps.refParam}`,
+          );
+        });
+
+        it('provides refParam as ref.shortName when available', async () => {
+          pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+          await createComponentWithApollo({ props: { refParam: 'another-branch' } });
+
+          expect(findPipelineVariablesForm().props('refParam')).toBe('another-branch');
+        });
+      });
     });
 
     describe('when user does not have permission to view variables', () => {