Focus automatically loses when clicking on Branch name field in "Create a branch for this issue" dialog

[watahiki606]

Select Topic Area

Bug

Feature Area

Issues

Body

Issue Description

When clicking the "Create a branch" link from an issue page and then clicking on the Branch name field in the "Create a branch for this issue" dialog, the focus is automatically lost immediately after gaining it. This prevents text selection or cursor movement operations (such as Ctrl+A), requiring users to click the field again to regain focus.

Steps to Reproduce

1. Open any issue page on GitHub
2. Click the "Create a branch" link
3. In the dialog that appears, click on the "Branch name" field
4. Focus is gained momentarily, but then automatically lost
5. Keyboard operations (such as Ctrl+A) don't work, requiring clicking the field again

Expected Behavior

After clicking the Branch name field, focus should remain on the field, allowing keyboard operations (Ctrl+A, cursor keys, etc.) to edit the text efficiently.

Environment

• Browser: Google Chrome Version 133.0.6943.142 (Official Build) (arm64)
• OS: macOS 14.5 (23F79)

Guidelines

• I have read the above statement and can confirm my post is relevant to the GitHub feature areas Issues and/or Projects.

[Aman3899]

Okay, watahiki606 is reporting a bug where the focus is immediately lost when clicking the "Branch name" field in the "Create a branch for this issue" dialog on GitHub. This makes it difficult to edit the branch name efficiently using keyboard shortcuts. Let's analyze this and provide a helpful response:

Understanding the Bug

The user clicks the "Branch name" field, and the field briefly gains focus, but then the focus is immediately lost. This is an unexpected behavior that interferes with usability.

Possible Causes

JavaScript Conflict: A JavaScript script on the page might be interfering with the focus event. This could be a GitHub script itself, or a browser extension.

DOM Manipulation: The dialog's DOM (Document Object Model) might be being manipulated in a way that causes the focus to be lost.

CSS Issue: While less likely, a CSS rule could be inadvertently affecting the focus behavior.

Focus Trap Issue: GitHub might be using a focus trap to manage keyboard navigation within the dialog, and there might be a bug in how it's implemented.

React/Framework Issue: If the dialog is built using a framework like React, there might be a lifecycle issue causing the component to re-render and lose focus.

Troubleshooting (From GitHub's Perspective)

Reproducibility: Can GitHub engineers reproduce the issue consistently across different accounts and repositories? This is the first step.

Browser/OS Specificity: Is the issue specific to Chrome on macOS, as the user reports, or does it occur on other browsers and operating systems?

Console Errors: Are there any JavaScript errors in the browser console when the focus is lost? These errors could provide clues about the cause.

Network Activity: Are there any unexpected network requests being made when the focus is lost?

Inspect the DOM: Use the browser's developer tools to inspect the DOM structure of the dialog and see if any elements are being added or removed when the focus is lost.

Event Listeners: Check the event listeners attached to the "Branch name" field to see if any are interfering with the focus event.

GitHub's Codebase: Search GitHub's codebase for relevant code related to the "Create a branch" dialog and focus management.

Test Without Extensions: Ask the user to try disabling browser extensions to see if one of them is causing the issue.

Response to the User (watahiki606)

"Hi watahiki606,

Thanks for reporting this issue! We've received your report about the focus being lost in the "Branch name" field in the "Create a branch for this issue" dialog. We understand this is impacting your ability to efficiently edit branch names, and we appreciate you providing the detailed steps and environment information.

Our engineering team is now investigating this issue. To help us further, could you please try the following:

Test in a different browser (e.g., Firefox, Safari) and on a different operating system (if possible) to see if the issue is specific to Chrome on macOS.

Disable your browser extensions temporarily to see if one of them might be interfering.

Open your browser's developer console (usually by pressing F12) and check for any JavaScript errors when the focus is lost. If there are any errors, please share them with us.

We'll keep you updated on our progress. Thanks for your patience!"

Why this response is helpful:

Acknowledges the issue: Shows the user they've been heard.

Reassures investigation: Indicates the issue is being taken seriously.

Requests further information: Asks the user for additional troubleshooting steps to narrow down the cause.

Sets expectations: Tells the user they'll be kept updated.

This combination of troubleshooting steps and a helpful response provides the best way to address the reported bug.

[watahiki606]

I verified that the issue can be reproduced in both Firefox and Safari.
Because it occurred in each browser, I have not tested for any interference from extensions.

I also found a more detailed sequence of steps to reproduce the issue:

• It only reproduces following the original steps immediately after the browser is reloaded.
• If, on the same page, I close the dialog and then click “create a branch” to open the dialog again, the issue does not occur.

Following your advice and checking the DevTools Network tab, I noticed that right after a reload, when I click “create a branch,” the two GraphQL fetches below are triggered. However, when I open it again, these queries do not appear to be called at all:

{"query":"a4b063a99c479ee7b809fa688b0234e9","variables":{"owner":"watahiki606","repo":"BiteLog"}}

{"query":"3f41ebaead699968fac6da02d1b8f377","variables":{"owner":"watahiki606","repo":"BiteLog"}}

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[sverdlov93]

any news on this?