weird propagation behaviour (Menu inside another)
- 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
Đánh giá
Issue này chưa được đánh giá.