Cancel button on metrics dashboard time picker does not work
Summary
The metrics dashboard contains a time picker. Clicking the 'cancel' button on the time picker does nothing, and produces a JS console error.
Steps to reproduce
- Set up the metrics dashboard.
- Navigate to the dashboard.
- Select the date range time picker in the header.
- Click the 'Cancel' button.
Example Project
https://gitlab.com/gitlab-org/monitor/tanuki-inc/-/metrics
What is the current bug behavior?
Clicking the 'cancel' button on the time picker does not close the time picker, and produces a JS console error.
What is the expected correct behavior?
Clicking the 'cancel' button closes the time picker, and does not produce a JS error.
Relevant logs and/or screenshots
Video demo: time_picker
The JS error in prod:
instrument.js:102 TypeError: Cannot read property 'hide' of undefined
at a.closeDropdown (date_time_picker.vue:189)
at Vt (vue.esm.js:1863)
at n (vue.esm.js:2188)
at Vt (vue.esm.js:1863)
at HTMLButtonElement.n (vue.esm.js:2184)
at HTMLButtonElement.o._wrapper (vue.esm.js:7559)
at HTMLButtonElement.r (helpers.js:71)
The JS error in dev:
[Vue warn]: Error in v-on handler: "TypeError: this.$refs.dropdown is undefined"
found in
---> <GlButton>
<BFormGroup>
<GlFormGroup>
<BFormGroup>
<GlFormGroup>
<BDropdown>
<GlDeprecatedDropdown>
<TooltipOnTruncate> at vue_shared/components/tooltip_on_truncate.vue
<DateTimePicker> at vue_shared/components/date_time_picker/date_time_picker.vue
<DashboardHeader> at monitoring/components/dashboard_header.vue
<Dashboard> at monitoring/components/dashboard.vue
<DashboardPage> at monitoring/pages/dashboard_page.vue
<Root> vue.esm.js:628
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
(If you can, link to the line of code that might be responsible for the problem)