Project/Group Transfer Namespace Dropdown Positioning Issues When Opening Near Bottom of Page

Summary

The namespace select dropdown for transferring a project or group always opens downward on first load, causing the options to display out of view if the user is too close to the bottom of the page. If you scroll while the dropdown is open, it will position itself correctly and open upwards if it gets too close to the bottom of the page.

Aside from being a general UX issue, this has also been causing flakiness for our E2E test qa/qa/specs/features/browser_ui/1_manage/group/transfer_project_spec.rb. The dropdown can sometimes change positions unexpectedly during a scroll while the test is in the middle of clicking a namespace, causing the test to fail.

Steps to reproduce

  1. For any project or group, go to Settings > General and expand the Advanced section
  2. Scroll down to the Transfer Project / Transfer Group section, but keep the dropdown close to the bottom of the screen
  3. Open the dropdown- notice the dropdown opens downwards with its options trailing off the screen instead of upwards
  4. While it's opened, start scrolling. Notice that the dropdown will correctly position itself and will continue opening upwards if it gets too close to the bottom.
  5. To recreate the issue again, you'll need to reload the page

What is the current bug behavior?

On first load, the project transfer namespace dropdown opens downward when positioned too close to the bottom of the page

Screen_Shot_2022-11-02_at_1.13.01_PM

What is the expected correct behavior?

On first load, the project transfer namespace dropdown should open upwards when positioned too close to the bottom of the page

Screen_Shot_2022-11-02_at_1.13.12_PM

Relevant logs and/or screenshots

Recording from test failure experiencing issues with dropdown positioning:

transfer_project_spec_dropdown_issue

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

Expand for output related to GitLab environment info 

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

Implementation Plan

  1. Migrate to GlCollapsibleListbox, guide found on migration issue: #413054 (closed)
Edited by 🤖 GitLab Bot 🤖