Akryum / Akryum/floating-vue

weird propagation behaviour (Menu inside another)

Đang mở
#1,044 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
3.5k
Fork
341
Merge trung bình
14 phút
Pull request đã merge (30 ngày)
8

Mô tả

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)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.