nextcloud-vue
nextcloud-vue copied to clipboard
Actions menu / Popover flying arrow on close
To be able to see it, need the actions popover to overlay some dark background.
Steps
- Open the talk app
- Start a call (no other participants needed)
- Click the three dots on the top right and focus your eyes on the arrow
- Click outside to close the actions popover
- Repeat the last two steps and look for the arrow
Expected result
The closing animation of the menu doesn't leave a flying arrow.
Actual result
The arrow will move to some direction and keep its opacity until the menu is closed.
With the arrow, I mean this one:
It as only solved by https://github.com/nextcloud/nextcloud-vue/pull/831 by pure luck. (and reverted)
I found the root cause: during the closing animation of the Actions menu, the property "opened" is already set to false, and the menu contents DOM is cleared too early. This is what prompts popper to update the position during the animation.
A quick fix is to remove the "opened" condition and always let the menu render itself, even when not opened. Another idea would be to add an extra flag to disable rendering that toggles after a delay. But not sure if such flag is worth the hassle...
quick patch here:
diff --git a/src/components/Actions/Actions.vue b/src/components/Actions/Actions.vue
index a586b75..f88e23b 100644
--- a/src/components/Actions/Actions.vue
+++ b/src/components/Actions/Actions.vue
@@ -140,7 +140,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
</button>
<!-- Menu content -->
- <div v-show="opened"
+ <div
ref="menu"
:class="{ open: opened }"
tabindex="-1"
@@ -154,7 +154,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
@mousemove="onMouseFocusAction">
<!-- menu content -->
<ul :id="randomId" tabindex="-1">
- <template v-if="opened">
+ <template>
<slot />
</template>
</ul>
but I now still have mixed feelings... if Actions menus are used in a list, it might cause too many DOM elements to be rendered.
In general I'd rather expect the VPopover/v-tooltip/popper to destroy its contents after hiding.
to clarify, Popper (the v-tooltip and Popover backend) has a resize observer that checks if the popup contents changes
whenever we flip the "opened" state, it will render or unrender the elements inside the popup, which is detected as change, so popper will update the popup's position
now, since we also have some animation in place, it will animate to the new position
@PVince81 Is this still an issue?
yes, reproducible on c.nc.com (NC 24.0.4rc1)
this time it's on this menu, if you open and close multiple times, you can see the arrow flying to the right
once Talk is updated to floating-vue (are we using it for popovers now?) we can try again
I tried again, I needed to click 10-15 times with different speeds to make it appear.
Now, am not sure if it's worth fixing... The only thing that matters I think is that we move away from v-tooltip for the Popover, as v-tooltip has many issues with timings and events.
We use floating-vue
now for the popovers. @PVince81 Could you check whether this still is an issue for you, please?
Should be fixed with using floating-vue
, if you still experience the issue please reopen.