Akryum / Akryum/floating-vue

Bug: TooltipDirective throws if unmounted after content changes: Cannot read properties of null (reading 'onResize')

Offen
#1,104 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
3.5k
Forks
341
Ø Merge
14 Min.
Gemergte PRs (30 T.)
8

Beschreibung

## Description

Hello and thank you for maintaining this great library.
There is a race condition that can cause a crash: `popperRef` can be null if the component is unmounted during `nextTick()`

https://github.com/Akryum/floating-vue/blob/a5b722f147311c219a9d182cfda095443984726d/packages/floating-vue/src/components/TooltipDirective.ts#L84-L87

The simplest [reproduction](https://play.vuejs.org/#eNp9VF1v2jAU/StuHgqVIEGi3QMF1q3rw/awTV23l2aaTHJJXBzb8ge0Qvnvu46TQFHVBxC+H8fnnHvNPvqkVLx1EM2iuck0U5YYsE4tU8EqJbUle6JhPSI7arNyRKS401rqW6qs05CTmqy1rMgAIQZHLQ9ScsvUF6Yhs2wLfd2aS2qZKMahIRWZFMYSS3UBliz8XUPhOL/oMvhtQXSpQQvchQd93ZYZtuLQ1lntoE+BZ9wB+I5UJAm5h0oiMVvipwWlawuaMGv6W0tqiFM5tZDHbZfSMncoSgo0g7+QndQbQ3bMlmTNnSlnZKCksSiusWzYQo3I8IIslmSfCtKRjbeUO095TbmBVNQjtO4VCKkbuieuD1FRj9Wo65HwFFdgDC0Qj6BkbBA9PoLNkzBmHDAeLFSKozo8ETJXy7lRVHijFmkUZpJGy87zEEAArFnOE78j2HQ6ah9EhWPmMbqpnJ+33WkU8rPWFqxpf/WZUDgWMgeD6WDbY4j+7auQI2gQGTSFfd3JLaaUO+G14D4cLtCsKEB78McDIHVWjkvWYAW/2gwalEEVuK6ktbIKmaQ3beUwKsgsZ4ai2hwLz1rlaURuMs6yzUEoTmnwO+xUv3ndOqPb3YbBPAm4B6tVZ2uYOQdR4NadLcgE+5rYjOz37b7XdeibJ0dDxqOxL9z/vGkfq9N8OCitVWaWJE6oTRFnskqOH+rNVXwZTxKUZ5OmPc6MGVxcp6JVvicV+s7E2Eo1I1cT9XxN6mbX2suiURSuG1dUxU9GCvzDadY3bRMmjZB8cBwHcHS7T6RRxxBMFZvyDXof4Rlfr6B8gaHzlRO5d98DIpMaCViDLq9ZcXI9ilWMg/6h/Jt+TYNyLnffmpjfoFEXz0rINm/En8xzYPtTgwGNjyHqc91m+vTdr+/I9ihZ4cQ93XeS92Akd55jKPvcKNRHdQ3br42b6MyDuUNDhOlENU/Au9HU49N0cPuO9APdaXx55OK/Lb4crEYDp/FVPJ34mDV/+uiHeBJPo/o/D0QoHg==):
1. content changes `finalContent` here
2. during `await nextTick()` (line 85), it gets unmounted via `v-if` in the `flush: 'post'` watcher
3. `popperRef` is null, so it crashes

## Where I tested

| commit | Result
|------|-----
|5.4.0 release | ❌ null ref exception
|main branch https://github.com/Akryum/floating-vue/commit/a5b722f147311c219a9d182cfda095443984726d | ❌ null ref exception
|next branch https://github.com/Akryum/floating-vue/commit/0ba8c1e443fddf1aa0a3ed30f2a51db652e9d6d0 | ✔️ no error

## Suggested fix
It seems reasonable to change line 86 to `popperRef?.onResize()` and add a test.
It is fixed on the `next` branch via [callOrWait](https://github.com/Akryum/floating-vue/blob/0ba8c1e443fddf1aa0a3ed30f2a51db652e9d6d0/packages/floating-vue/src/composable/usePopperMethods.ts#L17), which has null checking baked in.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.