Tooltip issue with interactive option

[hugo-lovighi]

Hi KoriGan !

I have an issue with tooltip component and VueRouter.

<l-tooltip :options="{ permanent: 'true', interactive: 'true'}">
    <router-link to="/">Link to route</router-link>
</l-tooltip>

When I pass 'interactive' tooltip option to true and try to navigate clicking on tooltip link, the navigation is ok but I got error on beforeDestroy lifecycle in chrome console for each tooltip component I have.

Error in beforeDestroy hook: "TypeError: Cannot read property '_targets' of null"

This error disappear if I remove interactive option.

Any idea ?

PS: Thank you for your work and time you spent on this project !

Browsers Affected

• Chrome

Versions

• Leaflet: v1.3.1 as dependencies
• Vue: v2.5.16
• Vue2Leaflet: v1.0.2
• VueRouter: 3.0.1

[sangdth]

@kesm0 : I have similar error when use tooltip with marker only, so I don't think VueRouter has any role in here.

<l-tooltip
    v-if="something"
    :options="tooltipOptions"
    class="tooltip-source"
>
    <p class="header">
        <strong>{{ source.source_name | truncate(20)}}</strong>
    </p>
</l-tooltip>

tooltipOptions: {
    permanent: true,
    direction: 'top',
    opacity: 1,
    interactive: true,
     // turn interactive on will cause bugs below
},

############

TypeError: Cannot read property '_targets' of null
    at NewClass.removeInteractiveTarget (leaflet-src.js?e11e:6500)
    at NewClass.closeTooltip (leaflet-src.js?e11e:10334)
    at NewClass.unbindTooltip (leaflet-src.js?e11e:10257)
    at VueComponent.beforeDestroy (vue2-leaflet.min.js?458e:1)
    at callHook (vue.esm.js?a026:2921)
    at VueComponent.Vue.$destroy (vue.esm.js?a026:2700)
    at destroy (vue.esm.js?a026:4178)
    at invokeDestroyHook (vue.esm.js?a026:5743)
    at invokeDestroyHook (vue.esm.js?a026:5748)
    at VueComponent.patch [as __patch__] (vue.esm.js?a026:6081)

[Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property '_targets' of null"

found in

---> <LTooltip>
       <LMarker>
         <VMarkerCluster>
           <LLayerGroup>
             <LMap>
               <MapView> at src/containers/mapview/MapView.vue
                 <App> at src/App.vue
                   <Root>

Versions
Leaflet: v1.3.3
Vue: v2.5.16
Vue2Leaflet: v1.0.2

[DonNicoJs]

This should be resolved in the new release @sangdth could you please verify ?

[hugo-lovighi]

@lordfuoco I will check as soon as release published.

[DonNicoJs]

@kesm0 the release is online since yesterday! You can update with npm / yarn

[hugo-lovighi]

Still same error on v1.1.1
When permanent and interactive set to true, on beforeDestroyed.

No errors with interactive only:

data: () => ({
		tooltipOptions: {  interactive: true },
	}),

No errors with permanent only:

data: () => ({
		tooltipOptions: {  permanent: true },
	}),

Errors with both:

data: () => ({
		tooltipOptions: { permanent: true, interactive: true},
	}),

Output:

[Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property '_targets' of null"

found in

 <LTooltip>
       <LMarker>
         <LMap>
           <SitesMap> at resources/assets/js/components/maps/SitesMap.vue
             <HomeMap> at resources/assets/js/views/app/home/Map.vue
               <HomeIndex> at resources/assets/js/views/app/home/Index.vue
                 <Page> at resources/assets/js/components/layout/Page.vue
                   <MainLayout> at resources/assets/js/views/layouts/Main.vue
                     <Root>

vue.common.js?2371:1743 TypeError: Cannot read property '_targets' of null
    at NewClass.removeInteractiveTarget (leaflet-src.js?9eb7:6504)
    at NewClass.closeTooltip (leaflet-src.js?9eb7:10340)
    at NewClass.unbindTooltip (leaflet-src.js?9eb7:10263)
    at VueComponent.beforeDestroy (vue2-leaflet.min.js?31d2:1)
    at callHook (vue.common.js?2371:2923)
    at VueComponent.Vue.$destroy (vue.common.js?2371:2702)
    at destroy (vue.common.js?2371:4180)
    at invokeDestroyHook (vue.common.js?2371:5745)
    at invokeDestroyHook (vue.common.js?2371:5750)
    at VueComponent.patch [as __patch__] (vue.common.js?2371:6083)

For me It's not a critical issue, I can deal with it in production, passing Vue config silent to true.

Browsers Affected

• Chrome

Versions

• Vue: v2.5.17
• Vue2Leaflet: v1.1.1

[hugo-lovighi]

I have different error feedback on firefox.

[Vue warn]: Error in beforeDestroy hook: "TypeError: this._map is null"

found in

 <LTooltip>
       <LMarker>
         <LMap>
           <SitesMap> at resources/assets/js/components/maps/SitesMap.vue
             <HomeMap> at resources/assets/js/views/app/home/Map.vue
               <HomeIndex> at resources/assets/js/views/app/home/Index.vue
                 <Page> at resources/assets/js/components/layout/Page.vue
                   <MainLayout> at resources/assets/js/views/layouts/Main.vue
                     <Root>

TypeError: "this._map is null"
	removeInteractiveTarget webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:6504:3
	closeTooltip webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:10340:5
	unbindTooltip webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:10263:4
	beforeDestroy webpack-internal:///./node_modules/vue2-leaflet/dist/vue2-leaflet.min.js:1:42540
	callHook webpack-internal:///./node_modules/vue/dist/vue.common.js:2921:9
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:2700:5
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:4178:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5743:59
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5748:9
	patch webpack-internal:///./node_modules/vue/dist/vue.common.js:6081:30
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:2723:5
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:4178:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5743:59
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5748:9
	patch webpack-internal:///./node_modules/vue/dist/vue.common.js:6081:30
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:2723:5
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:4178:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5743:59
	patch webpack-internal:///./node_modules/vue/dist/vue.common.js:6081:30
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:2723:5
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:4178:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5743:59
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5748:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5748:9
	patch webpack-internal:///./node_modules/vue/dist/vue.common.js:6081:30
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:2723:5
	destroy webpack-internal:///./node_modules/vue/dist/vue.common.js:4178:9
	invokeDestroyHook webpack-internal:///./node_modules/vue/dist/vue.common.js:5743:59
	removeVnodes webpack-internal:///./node_modules/vue/dist/vue.common.js:5759:11
	patch webpack-internal:///./node_modules/vue/dist/vue.common.js:6172:11
	_update webpack-internal:///./node_modules/vue/dist/vue.common.js:2670:16
	updateComponent webpack-internal:///./node_modules/vue/dist/vue.common.js:2788:7
	get webpack-internal:///./node_modules/vue/dist/vue.common.js:3142:13
	run webpack-internal:///./node_modules/vue/dist/vue.common.js:3219:17
	flushSchedulerQueue webpack-internal:///./node_modules/vue/dist/vue.common.js:2981:5
	nextTick webpack-internal:///./node_modules/vue/dist/vue.common.js:1837:9
	flushCallbacks webpack-internal:///./node_modules/vue/dist/vue.common.js:1758:14

Browsers Affected

• Firefox (63)

Versions

• Vue: v2.5.17
• Vue2Leaflet: v1.1.1

[DonNicoJs]

@kesm0 thank you for the detailed bug report, we will investigate this!

[hugo-lovighi]

Any idea for this issue ?
Interactive tooltip is a good feature, it's a pity if we can't use it with in vue-leaflet :)

[DonNicoJs]

@kesm0 yes sorry I somehow lost this issue! My bad I am on it

[hugo-lovighi]

Great news !
I made you an artisanal sample example on http://leaflet-test.imageau.eu/

[DonNicoJs]

@kesm0 So I've investigated this and is a nasty one.
This steams up from how we destroy leaflet instances on components beforeDestroy.

I will need to implement a queue where if a component IE marker has stuff 'appended to it' say a tooltip, before destroying itself destroy all his children.

Because destroying a children ( ie calling unbindTooltip ) cause leaflet to expect the parent to be there.

Quick fix would be to try-catch the unbindTooltip / unbindPopup since we anyhow destroy the parent. Still I am not a huge fan of quick fixes so I will go with the long route :)

Side note I just released a beta version (1.2.3-beta.0) that is built with vue-cli, could you by any chance test it on your real world project ?