Akryum / Akryum/floating-vue

weird propagation behaviour (Menu inside another)

未關閉
#1,044 0 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
3.5k
分支
341
平均合併
14 分鐘
30 天內合併 PR
8

描述

So, I have this scenario (which is not uncommon)... (especially in submenu > menu) situations...

```




some content

```

where SelectButton is

```

open

...

```

And HelpTip is:
```

import { Dropdown } from "floating-vue";
import { ref } from "vue";
import IconHelp from "~icons/material-symbols/help-outline";

const props = defineProps<{
text?: string;
}>();

const dropdownRef = ref<InstanceType<typeof Dropdown> | null>(null);

const hideTooltip = (event: Event) => {
if (event.target && (event.target as HTMLElement).closest(".trigger")) {
if (dropdownRef.value) {
dropdownRef.value.hide();
// event.stopImmediatePropagation();
}
}
};














{{ text }}




```

Now, I think is pretty self explanatory what I want to achieve... which is
when I hover over an element, that is wrapped inside a ``... the content of HelpTip should display as tooltip...

Works great.

Next thing I want is for any click action inside the to close the tooltip - BUT STILL ALLOW the action to happen...

What actually happens...

if I have logic like this:
```
const hideTooltip = (event: Event) => {
if (event.target && (event.target as HTMLElement).closest(".trigger")) {
if (dropdownRef.value) {
dropdownRef.value.hide();
}
}
};
```

the action (click) executes but the TOOLTIP does not hide...

but if I do this
```
const hideTooltip = (event: Event) => {
if (event.target && (event.target as HTMLElement).closest(".trigger")) {
if (dropdownRef.value) {
dropdownRef.value.hide();
event.stopImmediatePropagation();
}
}
};
```

the tooltip hides, and obviously the click event does not get triggered :/

and this happens ONLY where inside I have a nested dropdown ... because If I have

```


button text

TEST

```

It works as it should, the click get's executed and the "TEST" tooltip gets displayed.

so clearly the Dropdown component is hijacking the click event propagation and not propagating it correctly?

Any Ideas on how to tackle this thing would be great!

Here are some simplified live examples

[Normal button](https://playcode.io/1936915)
[Nested dropdown](https://playcode.io/1936919)

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。