search

enso-ui / dropdown

Vue Dropdown component
MIT License
0 stars 4 forks source link

Dropdown animation - propagation issue (Vue3 related). #12

Open robbykrlos opened 2 years ago

robbykrlos commented 2 years ago

This is a bug | feature request.

Prerequisites

Description

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

image (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,

image (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):

image

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:

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 commented 2 years ago

Not a solution but a workaround:

:root {
  --animate-duration: 0s;
  --animate-delay: 0s;
  --animate-repeat: 1;
}
aocneanu commented 2 years ago

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

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

robbykrlos commented 2 years ago

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 commented 2 years ago

@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 https://github.com/enso-ui/filters/issues/13 https://github.com/enso-ui/tables/issues/36

robbykrlos commented 2 years ago

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.

image

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

robbykrlos commented 2 years ago

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

image

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 :-)