Dropdown animation - propagation issue (Vue3 related).

[robbykrlos]

This is a bug | feature request.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

Another strange one on UI. The dropdown is now behaving strangely in some situations:

(picture taken while animation was fading in (just clicked the select)

As seen in this picture above, the dropdown menu is opened over the update button.

If you select something and relativity fast click on Update(to save the form) - it will still register the click on the menu item even if the ongoing animation is faded away the dropdown menu - and you do not (or barely) see there is a menu item you just clicked,

(initially the 'fff' option was selected, but if I click outside of the menu, the animation will be triggered to close the menu, but at the point that i'm seeing the "Update" button, i'm clicking it, it will just deselect my option 'fff', and now the dropdown value was deselected telling me I need to "Choose".

You can simulate this on your side too - if you change the role to an existing user,and then immediately click on password field (on the overlapping part with the role dropdown menu):

In a similar way, if you choose value "123" and immediately click update - it will actually appear that you have selected value 'fff' since that value is overlapping the Update button.

I have looked a bit towards this issue and traced it to:

• enso-ui/dropdown (client/node_modules/@enso-ui/dropdown/src/bulma/Dropdown.vue)
• enso-ui/transitions client/node_modules/@enso-ui/transitions/src/transitions/Mirror.vue
• client/node_modules/animate.css/animate.css (maybe?)

This does not happen on version 4.8.2 (Vue 2). Behavior here : not registering the click on the fading away component, but not even on the element in the background (ex Update button)

[robbykrlos]

Not a solution but a workaround:

:root {
  --animate-duration: 0s;
  --animate-delay: 0s;
  --animate-repeat: 1;
}

[aocneanu]

I believe it has something to do with v-click-outside.

Do you have the latest @enso-ui/mixins?

[robbykrlos]

I believe it has something to do with v-click-outside.

Do you have the latest @enso-ui/mixins?

Did you mean @enso-ui/directives?

I would assume so.

No, since the latest conflicts with @enso-ui/users 6.0, we reverted and stayed there.

"@enso-ui/directives@^2.0":
  version "2.0.11"

I will update. Thanks.

[robbykrlos]

@aocneanu update to

"@enso-ui/directives@^2.0":
  version "2.0.13"

It does not solve the animation issue (this issue), but it did solve the enso-ui/filters#13 enso-ui/tables#36

[robbykrlos]

We recently discovered that if you click on the "Select" card inside each option it will propagate the click back into the site and consider it "click-outside", not selecting the option, and closing the table filter.

PS: tested on 4.9.1, but it can be simulated on your demo site with latest version.

[robbykrlos]

Same happens for Table control options that are multi-select:

But generally I think you understand the issue, and probably the fix will be more generic, so no need to list all the places where this happens :-)