Unbind tooltip remove focus listeners #9232

hollowM1ke · 2024-01-26T16:33:27Z

My solution for #9071

Falke-Design

Thank you for trying to solve this issue but this solution causes other tests to fail. Please make sure to test if all the tests are successfull. You can do this with npm run test

hollowM1ke · 2024-01-30T16:40:16Z

@Falke-Design it is really strange. I get the same tests result on my branch and on main.

So I've run npm run test on my branch and I get the following:

Then I wanted to see if I get any errors on the main branch. And I get this:

Would there be a reason this happens?

Falke-Design · 2024-01-30T16:55:14Z

Did you do a re-build? npm run watch

hollowM1ke · 2024-01-30T16:56:58Z

Did you do a re-build? npm run watch

I've done npm run build and then npm run test. Should I do npm run test and then npm run watch? If yes, then I'm not sure how, because npm run test doesn't terminate and I have to force cancel.

Falke-Design · 2024-01-30T17:00:03Z

no, you did it correct. First build and then test.

I will check it the next days by myself. In the mean time you can merge the latest commit from main into your branch

hollowM1ke · 2024-01-30T19:19:29Z

@Falke-Design so I've realized that I forgot to npm run build one more time after changing from my branch to main. That's why I had the same errors appearing. All the tests pass on main no problem. I'm sorry, my mistake. How would I start debugging the tests that fail? Could you give me a starting point? I would appreciate your help.

Falke-Design

Looks better now 😄
Can you please try to add a test which covers your changes

Falke-Design · 2024-02-02T16:23:02Z

src/layer/Tooltip.js

+				DomEvent.on(el, 'focus', function () {
+					this._tooltip._source = layer;
+					this.openTooltip();
+				}, this);
+				DomEvent.on(el, 'blur', this.closeTooltip, this);


We should remove the events here too

Falke-Design · 2024-02-02T16:26:04Z

src/layer/Tooltip.js

+	_handleFocus() {
+		this._tooltip._source = this;
+		this.openTooltip();
+	},
+
+	_handleBlur() {
+		this.closeTooltip();
+	},
+


Code exists twice: here and in _addFocusListenersOnLayer

hollowM1ke · 2024-02-13T07:10:36Z

Hi @Falke-Design, could I get an update?

Falke-Design

Sorry for letting you wait so long.
I rewrote the functions, what do you think about it?

Falke-Design · 2024-02-20T20:17:21Z

src/layer/Tooltip.js

+	_addFocusListeners(remove) {
 		if (this.getElement) {
-			this._addFocusListenersOnLayer(this);
-		} else if (this.eachLayer) {
-			this.eachLayer(this._addFocusListenersOnLayer, this);
+			const el = this.getElement();
+			if (el) {
+				const onOff = remove ? 'off' : 'on';
+				DomEvent[onOff](el, 'focus', () => this._handleFocus(this), this);
+				DomEvent[onOff](el, 'blur', this._handleBlur, this);
+			}
+		} else if (this.eachLayer && this._map.getRenderer(this)) {
+			this.eachLayer(layer => this._addFocusListenersOnLayer(layer), this);
 		}
 	},

-	_addFocusListenersOnLayer(layer) {
-		const el = typeof layer.getElement === 'function' && layer.getElement();
-		if (el) {
-			DomEvent.on(el, 'focus', function () {
-				this._tooltip._source = layer;
-				this.openTooltip();
-			}, this);
-			DomEvent.on(el, 'blur', this.closeTooltip, this);
+	_handleFocus(source) {
+		if (this._tooltip) {
+			this._tooltip._source = source;
+			this.openTooltip();
+		}
+	},
+
+	_handleBlur() {
+		this.closeTooltip();
+	},
+
+	_addFocusListenersOnLayer(layer, remove) {
+		if (layer.getElement) {
+			const el = layer.getElement();
+			if (el) {
+				const onOff = remove ? 'off' : 'on';
+				DomEvent[onOff](el, 'focus', () => this._handleFocus(layer), this);
+				DomEvent[onOff](el, 'blur', this._handleBlur, this);
+			}
 		}


I think we should do the following (or something similar if there is a better way):

_addFocusListeners does the same for a element as _addFocusListenersOnLayer, so we don't duplicate the code.

Then the _handleBlur don't need to be a function anymore, because we can call closeTooltip directly

We store the named function / listener (el._leaflet_focus_handler) for the focus on the element, because an anonymous function / listener can't be removed with off

_addFocusListeners(remove) { if (this.getElement) { this._addFocusListenersOnLayer(this, remove); } else if (this.eachLayer && this._map.getRenderer(this)) { this.eachLayer(layer => this._addFocusListenersOnLayer(layer, remove), this); } }, _addFocusListenersOnLayer(layer, remove) { const el = typeof layer.getElement === 'function' && layer.getElement(); if (el) { const onOff = remove ? 'off' : 'on'; if (!remove) { // Remove focus listener, if already existing el._leaflet_focus_handler && DomEvent.off(el, 'focus', el._leaflet_focus_handler, this); el._leaflet_focus_handler = () => { if (this._tooltip) { this._tooltip._source = layer; this.openTooltip(); } }; } el._leaflet_focus_handler && DomEvent[onOff](el, 'focus', el._leaflet_focus_handler, this); DomEvent[onOff](el, 'blur', this.closeTooltip, this); if (remove) { delete el._leaflet_focus_handler; } } },

Falke-Design · 2024-02-20T20:19:26Z

spec/suites/layer/TooltipSpec.js

+		setTimeout(() => {
+			expect(() => UIEventSimulator.fire('focus', marker.getElement())).to.not.throw();
+		}, 2000);
+	});
 });


Please add a test for a LayerGroup too:

const marker = new Marker(latlng); var lg = new LayerGroup([marker]).addTo(map); lg .bindTooltip('Tooltip that will be unbinded in two seconds') .openTooltip() .unbindTooltip();

Falke-Design · 2024-02-20T20:20:03Z

spec/suites/layer/TooltipSpec.js

+
+		setTimeout(() => {
+			expect(() => UIEventSimulator.fire('focus', marker.getElement())).to.not.throw();
+		}, 2000);


We should not wait so long. Maximum of 500ms is allowed, better is earlier

Adauji and others added 2 commits January 26, 2024 17:25

remove focus listerens

fa1ff24

Merge branch 'Leaflet:main' into unbindTooltip

669512f

hollowM1ke mentioned this pull request Jan 26, 2024

unbindTooltip does not remove focus listeners #9071

Open

4 tasks

Falke-Design requested changes Jan 28, 2024

View reviewed changes

Merge branch 'main' into unbindTooltip

7b8b910

fixed tests

eb3f3f4

hollowM1ke requested a review from Falke-Design February 2, 2024 15:07

Falke-Design requested changes Feb 2, 2024

View reviewed changes

remove duplicate + listeners remove + test

280c3df

hollowM1ke requested a review from Falke-Design February 2, 2024 20:50

Falke-Design requested changes Feb 20, 2024

View reviewed changes

Merge branch 'Leaflet:main' into unbindTooltip

33f534f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unbind tooltip remove focus listeners #9232

Unbind tooltip remove focus listeners #9232

hollowM1ke commented Jan 26, 2024

Falke-Design left a comment

hollowM1ke commented Jan 30, 2024 •

edited

Falke-Design commented Jan 30, 2024

hollowM1ke commented Jan 30, 2024 •

edited

Falke-Design commented Jan 30, 2024

hollowM1ke commented Jan 30, 2024

Falke-Design left a comment

Falke-Design Feb 2, 2024

Falke-Design Feb 2, 2024

hollowM1ke commented Feb 13, 2024

Falke-Design left a comment

Falke-Design Feb 20, 2024

Falke-Design Feb 20, 2024

Falke-Design Feb 20, 2024

Unbind tooltip remove focus listeners #9232

Are you sure you want to change the base?

Unbind tooltip remove focus listeners #9232

Conversation

hollowM1ke commented Jan 26, 2024

Falke-Design left a comment

Choose a reason for hiding this comment

hollowM1ke commented Jan 30, 2024 • edited

Falke-Design commented Jan 30, 2024

hollowM1ke commented Jan 30, 2024 • edited

Falke-Design commented Jan 30, 2024

hollowM1ke commented Jan 30, 2024

Falke-Design left a comment

Choose a reason for hiding this comment

Falke-Design Feb 2, 2024

Choose a reason for hiding this comment

Falke-Design Feb 2, 2024

Choose a reason for hiding this comment

hollowM1ke commented Feb 13, 2024

Falke-Design left a comment

Choose a reason for hiding this comment

Falke-Design Feb 20, 2024

Choose a reason for hiding this comment

Falke-Design Feb 20, 2024

Choose a reason for hiding this comment

Falke-Design Feb 20, 2024

Choose a reason for hiding this comment

hollowM1ke commented Jan 30, 2024 •

edited

hollowM1ke commented Jan 30, 2024 •

edited