Bug: TooltipDirective throws if unmounted after content changes: Cannot read properties of null (reading 'onResize')
- 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
Bewertung
Dieses Issue wurde noch nicht bewertet.