Fix uploading focus area

What does this MR do and why?

Addresses: #545017

File uploads, such as video files, would not stick to the original target in a form, resulting in the completed file upload link being placed into other form fields if the focus changed. The most common example of this is:

  1. Upload a video file in an MR description
  2. Move to the next 'field', which is MR assignment.
  3. Realise the video upload occurred, but filled the markdown link into the assignee dropdown form

Discussion

I identified the source of how GitLab handles this file uploading and discussed with both Claude and GitLab Duo on how to fix it. In summary:

Claude GitLab Duo
  • Discussion link (GitLab internal use only)
  • Suggested amending the if/else statement based on the target state.
  • Added a simple change with target.focus(); in the early part of the script, to ensure it retains the focus when the upload completes

Claude's suggestion:

...
if (!execInsertText(insertedText, hasSelection)) {

  const canUseExecCommand = document.activeElement === target;
  
  if (canUseExecCommand && !execInsertText(insertedText, hasSelection)) {
    const newText = textBefore + insertedText + textAfter;
    target.value = newText;
    target.selectionStart = selectionStart + insertedText.length;
    target.selectionEnd = selectionStart + insertedText.length;
  } else if (!canUseExecCommand) {
...

Screenshots or screen recordings

Before After

(Taken from the original issue)

Screen_Recording_2025-05-21_at_10.14.20_PM.mov

(On GDK)

2025-07-15 11-22-16.mov

How to set up and validate locally

  1. Upload a video file in an MR description, depending on your connection speed to GDK, it should be a large file to let you move to the next field with sufficient time.
  2. Move to the next 'field', such as the MR assignee.
  3. Confirm that the video upload Markdown link remains in the description, and not the new field.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports

Loading