diff --git a/integrations/github/src/components.tsx b/integrations/github/src/components.tsx
index eea420eb7..6c9632f60 100644
--- a/integrations/github/src/components.tsx
+++ b/integrations/github/src/components.tsx
@@ -66,7 +66,9 @@ export const configBlock = createComponent<
                     ...element,
                     state: {
                         ...element.state,
-                        branch: action.branch,
+                        branch: action.branch.includes('refs/heads/')
+                            ? action.branch
+                            : `refs/heads/${action.branch}`,
                     },
                 };
             case 'toggle.customTemplate':
@@ -261,6 +263,8 @@ export const configBlock = createComponent<
                                                         query: {
                                                             repository:
                                                                 element.dynamicState('repository'),
+                                                            selectedBranch:
+                                                                element.dynamicState('branch'),
                                                             v: versionHash,
                                                         },
                                                     },
diff --git a/integrations/github/src/index.ts b/integrations/github/src/index.ts
index 4eaefcc78..9a77932fd 100644
--- a/integrations/github/src/index.ts
+++ b/integrations/github/src/index.ts
@@ -267,12 +267,14 @@ const handleFetchEvent: FetchEventCallback<GithubRuntimeContext> = async (reques
      * API to fetch all branches of an account's repository
      */
     router.get('/branches', async (req) => {
-        const { repository: queryRepository } = req.query;
+        const { repository: queryRepository, selectedBranch } = req.query;
 
         const repositoryId =
             queryRepository && typeof queryRepository === 'string'
                 ? parseInt(queryRepository, 10)
                 : undefined;
+        const querySelectedBranch =
+            selectedBranch && typeof selectedBranch === 'string' ? selectedBranch : undefined;
 
         const branches = repositoryId ? await fetchRepositoryBranches(context, repositoryId) : [];
 
@@ -284,6 +286,21 @@ const handleFetchEvent: FetchEventCallback<GithubRuntimeContext> = async (reques
             })
         );
 
+        /**
+         * When a branch is selected by typing its name, it might not be in the list of branches
+         * returned by the API. In this case, we add it to the list of branches so that it can be
+         * selected in the UI.
+         */
+        if (querySelectedBranch) {
+            const hasSelectedBranch = data.some((branch) => branch.id === querySelectedBranch);
+            if (!hasSelectedBranch) {
+                data.push({
+                    id: querySelectedBranch,
+                    label: querySelectedBranch.replace('refs/heads/', ''),
+                });
+            }
+        }
+
         return new Response(JSON.stringify(data), {
             headers: {
                 'Content-Type': 'application/json',
diff --git a/integrations/gitlab/src/components.tsx b/integrations/gitlab/src/components.tsx
index c4ed8bfa6..ee2579207 100644
--- a/integrations/gitlab/src/components.tsx
+++ b/integrations/gitlab/src/components.tsx
@@ -106,7 +106,9 @@ export const configBlock = createComponent<
                     ...element,
                     state: {
                         ...element.state,
-                        branch: action.branch,
+                        branch: action.branch.includes('refs/heads/')
+                            ? action.branch
+                            : `refs/heads/${action.branch}`,
                     },
                 };
             }
@@ -317,6 +319,8 @@ export const configBlock = createComponent<
                                                         query: {
                                                             project:
                                                                 element.dynamicState('project'),
+                                                            selectedBranch:
+                                                                element.dynamicState('branch'),
                                                             v: versionHash,
                                                         },
                                                     },
diff --git a/integrations/gitlab/src/index.ts b/integrations/gitlab/src/index.ts
index e9dd60c73..ee23ddbbc 100644
--- a/integrations/gitlab/src/index.ts
+++ b/integrations/gitlab/src/index.ts
@@ -169,7 +169,7 @@ const handleFetchEvent: FetchEventCallback<GitLabRuntimeContext> = async (reques
      * API to fetch all branches of a project's repository
      */
     router.get('/branches', async (req) => {
-        const { project: queryProject } = req.query;
+        const { project: queryProject, selectedBranch } = req.query;
 
         const spaceInstallation = environment.spaceInstallation;
         assertIsDefined(spaceInstallation, { label: 'spaceInstallation' });
@@ -180,6 +180,8 @@ const handleFetchEvent: FetchEventCallback<GitLabRuntimeContext> = async (reques
             queryProject && typeof queryProject === 'string'
                 ? parseInt(queryProject, 10)
                 : undefined;
+        const querySelectedBranch =
+            selectedBranch && typeof selectedBranch === 'string' ? selectedBranch : undefined;
 
         const branches = projectId ? await fetchProjectBranches(config, projectId) : [];
 
@@ -191,6 +193,21 @@ const handleFetchEvent: FetchEventCallback<GitLabRuntimeContext> = async (reques
             })
         );
 
+        /**
+         * When a branch is selected by typing its name, it might not be in the list of branches
+         * returned by the API. In this case, we add it to the list of branches so that it can be
+         * selected in the UI.
+         */
+        if (querySelectedBranch) {
+            const hasSelectedBranch = data.some((branch) => branch.id === querySelectedBranch);
+            if (!hasSelectedBranch) {
+                data.push({
+                    id: querySelectedBranch,
+                    label: querySelectedBranch.replace('refs/heads/', ''),
+                });
+            }
+        }
+
         return new Response(JSON.stringify(data), {
             headers: {
                 'Content-Type': 'application/json',