Skip to content

When the title in the issue has a value, set the text cursor at the end of the text. #30090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 27, 2024
Merged

When the title in the issue has a value, set the text cursor at the end of the text. #30090

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a359c00
Change the focus of the issue title
HEREYUA Mar 26, 2024
ae9d4f1
fix
HEREYUA Mar 26, 2024
8dee76b
Merge branch 'main' into fix/modify_issue_title_focus
silverwind Mar 26, 2024
9eeab81
add autofocus-end.js
HEREYUA Mar 27, 2024
980fc8c
Merge branch 'fix/modify_issue_title_focus' of github.com:HEREYUA/git…
HEREYUA Mar 27, 2024
27efe8e
Merge branch 'main' into fix/modify_issue_title_focus
GiteaBot Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/repo/issue/new_form.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{{ctx.AvatarUtils.Avatar .SignedUser 40}}
<div class="ui segment content tw-my-0">
<div class="field">
<input name="title" id="issue_title" placeholder="{{ctx.Locale.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" autofocus required maxlength="255" autocomplete="off">
<input name="title" id="issue_title" placeholder="{{ctx.Locale.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" required maxlength="255" autocomplete="off">
{{if .PageIsComparePull}}
<div class="title_wip_desc" data-wip-prefixes="{{JsonUtils.EncodeToString .PullRequestWorkInProgressPrefixes}}">{{ctx.Locale.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0)}}</div>
{{end}}
Expand Down
8 changes: 8 additions & 0 deletions web_src/js/features/repo-issue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,14 @@ export function initRepoIssueReferenceRepositorySearch() {
});
}

export function initRepoIssueTitleFocus() {
const issueTitle = document.getElementById('issue_title');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of hard-coding issue_title here, I would suggest to introduce a general CSS selector:

<input type="js-auto-focus-end ...">

Copy link
Member

@silverwind silverwind Mar 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we could keep the DOM autofocus property, detect when it runs and then just set the cursor to the right position when a class like js-autofocus-end is present. That should in theory also work for content appended to DOM via JS, unlike a querySelector-based solution which wouldn't.

Copy link
Member

@silverwind silverwind Mar 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it's possible to detect autofocus in JS. One could install a focus event listener on document.body but the problem will be telling apart a autofocus from a regular user interaction.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah no I think trying to detect autofocus is a hopeless effort. Would suggest to follow @wxiaoguang and add this simple class that will manually focus the first matching element on page load.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated

if (issueTitle) {
issueTitle.focus();
issueTitle.setSelectionRange(issueTitle.value.length, issueTitle.value.length);
}
}

export function initRepoIssueWipTitle() {
$('.title_wip_desc > a').on('click', (e) => {
e.preventDefault();
Expand Down
2 changes: 2 additions & 0 deletions web_src/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
initRepoIssueDue,
initRepoIssueReferenceRepositorySearch,
initRepoIssueTimeTracking,
initRepoIssueTitleFocus,
initRepoIssueWipTitle,
initRepoPullRequestMergeInstruction,
initRepoPullRequestAllowMaintainerEdit,
Expand Down Expand Up @@ -154,6 +155,7 @@ onDomReady(() => {
initArchivedLabelHandler();
initRepoIssueReferenceRepositorySearch();
initRepoIssueTimeTracking();
initRepoIssueTitleFocus();
initRepoIssueWipTitle();
initRepoMigration();
initRepoMigrationStatusChecker();
Expand Down