Follow-up from "Revert 324246-fix-incorrect-trigger-property-name"
The following discussion from !58257 (merged) should be addressed:
-
@dftian started a discussion: (+1 comment) I know it seems weird to re-break something instead of fixing it, but to give more context, the version of GitLab UI currently used (v28.15.0) has a bug where popover
triggers
are hard-coded tohover focus
, so it doesn't matter what you pass for the prop: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/v28.15.0/src/components/base/popover/popover.vue#L33. I fixed the bug in this MR: gitlab-ui!2112 (merged) which is available starting from v28.17.0.While looking for examples of how the
triggers
prop is used, I accidentally searched fortrigger=
and found this one place where it was using the wrong prop, so I created a MR to change it totriggers
. It passed the pipeline and was merged because GitLab UI was not yet bumped up to a version with the custom triggers fix, so behind the scenes it was still hard-coded totriggers="hover focus"
.In another MR I'm currently working on, I bumped GitLab UI's version to get some needed bug fixes. However, this also fixed custom triggers, which caused the Ruby test for this popover to fail. I tried to fix the popover instead of reverting, but it's rather complicated. This is the popover:
and the original design issue is here: gitlab-org/growth/ui-ux#63 (closed)
The popover is supposed to show on page load and continue showing until either the X icon is clicked, or the user selects an item in the dropdown. The Ruby test clicks on the dropdown button, then on a dropdown item, then verifies that the popover is no longer visible. This works when the trigger is hard-coded to
hover focus
because the dropdown button is considered in focus when either it or one of its children is focused:With the custom trigger fix applied, the Ruby test fails because the popover stays open:
The fix is not simple because:
- The dropdown is not a Vue component, it's rendered by a haml file.
- We need to shift the popover so that it's not overlapping the dropdown, but only when the dropdown is open. This is not easy to do because we have to change popover targets, but the popover doesn't support changing targets (it only lets us set an initial target).
- We need to hide the popover only after the user clicks on a dropdown item, but because the dropdown is not a Vue component, we would need to use jQuery or native functions to add the event listeners.
Because the fix is not simple and this is blocking me from completing my MRs, I decided to revert the change for now.
@jackie_fraser FYI
☝