GitLab mouse clicks should register on mouseup, not mousedown
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Utilization group: Bug Report Template
Bug Summary
Currently, some of GitLab's custom site behavior for mouse interactions registers on a mousedown event. But, they should register on a mouseup event. This gives users that misclick an opportunity to move their mouse before releasing it so as to not register the errant click.
You can compare this behavior to clicking links, where on mousedown nothing happens, and if you move the mouse away, while the link gets dragged, the mouseup event does not cause the link to be opened.
Steps to reproduce
This is just a sample place this occurs. There are others. This is the one I have most often, and most recently, run into.
- Go to any page with a search component.
- Start typing search terms.
- Mouse down on one of the entries.
- Observe that the action is taken without releasing the mouse.
Example Project
What is the current bug behavior?
The selection is registered too early as it's tied to mousedown events.
What is the expected correct behavior?
The site should wait for the mouseup event before making the selection.
Reproducibility
This reproduces consistently.
Impact Assessment
I hit this all the time. And the cost of a misclick can be high as it take three clicks (plus typing sometimes) to get most searches going, and a misclick at any point means restarting the entire process. And, there is a notable delay in some search boxes being displayed then being filled in.
Severity
It's a small, but noticeable hiccup to hit on the site. It can be rather frustrating as it differs from other parts of the site and the browser in general.
Environments
- Firefox 136.0.4
- Chromium 134.0.6998.165
- Chrome 134.0.6998.165
Screenshots and/or Relevant logs
I don't have a straightforward way to record my screen with mouse events, but this is eminently reproduceable and occurs on every browser I have tested.
Output of checks (GitLab.com)
This bug happens on GitLab.com
Results of GitLab environment info
N/A
Results of GitLab application Check
N/A
Possible fixes
Basically every instance from git grep -i mousedown should be audited to ensure behavior reflects what native UI elements would do in browsers.
> git grep -i mousedown | wc -l
115
> git grep --name-only -i mousedown
app/assets/javascripts/behaviors/preview_markdown.js
app/assets/javascripts/commit/image_file.js
app/assets/javascripts/content_editor/components/wrappers/image.vue
app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown.js
app/assets/javascripts/design_management/components/design_overlay.vue
app/assets/javascripts/design_management/components/design_presentation.vue
app/assets/javascripts/diff.js
app/assets/javascripts/diffs/components/diff_view.vue
app/assets/javascripts/editor/extensions/source_editor_extension_base.js
app/assets/javascripts/filtered_search/droplab/hook_input.js
app/assets/javascripts/filtered_search/droplab/keyboard.js
app/assets/javascripts/filtered_search/droplab/plugins/filter.js
app/assets/javascripts/glql/components/common/th_resizable.vue
app/assets/javascripts/sidebar/components/labels/labels_select_vue/labels_select_root.vue
app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
app/assets/javascripts/vue_shared/components/file_finder/index.vue
app/assets/javascripts/vue_shared/components/panel_resizer.vue
app/assets/javascripts/work_items/components/design_management/design_management_widget.vue
app/assets/javascripts/work_items/components/design_management/design_preview/design_overlay.vue
app/assets/javascripts/work_items/components/design_management/design_preview/design_presentation.vue
changelogs/archive-13.md
ee/app/assets/javascripts/boards/components/board_settings_wip_limit.vue
ee/app/assets/javascripts/filtered_search/droplab/plugins/custom_number.js
ee/app/assets/javascripts/work_items/components/work_item_custom_fields_number.vue
ee/app/assets/javascripts/work_items/components/work_item_custom_fields_text.vue
lib/gitlab/sanitizers/svg/whitelist.rb
public/-/speedscope/speedscope.026f36b0.js
public/-/speedscope/speedscope.026f36b0.js.map
spec/features/boards/multi_select_spec.rb
spec/frontend/content_editor/components/wrappers/image_spec.js
spec/frontend/design_management/components/design_overlay_spec.js
spec/frontend/design_management/components/design_presentation_spec.js
spec/frontend/editor/source_editor_extension_base_spec.js
spec/frontend/glql/components/common/th_resizable_spec.js
spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
spec/frontend/vue_shared/components/panel_resizer_spec.js
spec/frontend/work_items/components/design_management/design_preview/design_overlay_spec.js
spec/support/helpers/rich_text_editor_helpers.rb
vendor/assets/javascripts/bootstrap/js/src/modal.js
vendor/gems/graphql/lib/graphql/dashboard/statics/bootstrap-5.3.3.min.js
vendor/gems/sidekiq/web/assets/javascripts/chart.min.js