Prevent adding layer while expanding Layer-Control on mobile

[Falke-Design]

fixes #8778

Cherry-pick into v1

[Falke-Design]

@jonkoops @mourner @IvanSanchez please review, I would like to release a new 1.9 version soon.

[PedroVenancio]

Hi @Falke-Design

I'm not sure it can be done this way, but I've applied the changes to the leafet-src.js file (Leaflet v1.9.3) and it doesn't seem to fix the problem.

  	initialize: function (baseLayers, overlays, options) {
  		setOptions(this, options);

  		this._layerControlInputs = [];
  		this._layers = [];
  		this._lastZIndex = 0;
  		this._handlingClick = false;
  		this._preventClick = false;

  		for (var i in baseLayers) {
  			this._addLayer(baseLayers[i], i);
  		}

  	_onInputClick: function () {
                // expanding the control on mobile with a click can cause adding a layer - we don't want this
		if (this._preventClick) {
			return;
		}
        
  		var inputs = this._layerControlInputs,
  		    input, layer;
  		var addedLayers = [],
  		    removedLayers = [];

  		this._handlingClick = true;

  	_expandSafely: function () {
  		var section = this._section;
  		this._preventClick = true;
  		on(section, 'click', preventDefault);
  		this.expand();
  		setTimeout(function () {
  			off(section, 'click', preventDefault);
  			this._preventClick = false;
  		});
  	}

Should I change anything else?

Thank you very much @Falke-Design

[Falke-Design]

@PedroVenancio I don't know how you access leaflet-src and maybe it is cached but it should work.

With this, it should work:

const _onInputClickSuper = L.Control.Layers.prototype._onInputClick;
const NewLayerControl = L.Control.Layers.include({
	_onInputClick() {
		// expanding the control on mobile with a click can cause adding a layer - we don't want this
		if (this._preventClick) {
			return;
		}

		_onInputClickSuper.apply(this);
	},
	_expandSafely() {
		const section = this._section;
		this._preventClick = true;
		L.DomEvent.on(section, 'click', L.DomEvent.preventDefault);
		this.expand();
		setTimeout(() => {
			L.DomEvent.off(section, 'click', L.DomEvent.preventDefault);
			this._preventClick = false;
		});
	}
})

https://plnkr.co/edit/Hx3iDIBQEsH7TTET

Demo: https://run.plnkr.co/plunks/Hx3iDIBQEsH7TTET/

[PedroVenancio]

Hi @Falke-Design

Oh, I can confirm the fix with L.control.layers!

The problem was that I was testing in a app where I'm using Leaflet.Control.Layers.Tree (https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree). In this case, it keeps with the same behaviour:

https://plnkr.co/edit/W135NFAEtQV0a3ZK

https://run.plnkr.co/plunks/W135NFAEtQV0a3ZK

Do you think it needs to be fixed also in Leaflet.Control.Layers.Tree?

[PedroVenancio]

Hi @Falke-Design

Oh, I can confirm the fix with L.control.layers!

The problem was that I was testing in a app where I'm using Leaflet.Control.Layers.Tree (https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree). In this case, it keeps with the same behaviour:

https://plnkr.co/edit/W135NFAEtQV0a3ZK

https://run.plnkr.co/plunks/W135NFAEtQV0a3ZK

Do you think it needs to be fixed also in Leaflet.Control.Layers.Tree?

Hi @Falke-Design
After update to 1.9.4, I can confirm that the fix works great with L.control.layers, but not with Leaflet.Control.Layers.Tree.
Do you think it needs to be fixed in the Leaflet.Control.Layers.Tree side?
Thanks!

[Falke-Design]

@PedroVenancio yeah I'm pretty sure that this needs to be added in Leaflet.Control.Layers.Tree too. Make an issue on their repo please.