Fix(#5328): Layers Control can now become scrollable even if collapsed: false (#5348)

* Fix(#5328): Layers Control scrollable even if collapsed: false

the `expand()` method was called only when expanding the Layers Control through user action.
In the case of option `collapsed: false`, no event listener is attached (no user action expected to expand), therefore the control height is no longer adjusted compared to map container's height, whereas the only time it is done is at initialization, when the control is not yet inserted into the DOM, hence it does not have an actual height to check against.
Therefore added a hook on `addTo()` in order to run `expand()` AFTER the control has been insterted into the DOM.
The same issue happens when later adding more base layers / overlays to the Layers Control: it not collapsed, we should run again the height check (e.g. through the `expand()` method) to make sure we make it scrollable if necessary.
Therefore called `expand()` after each `_addLayer()`.
Actually checking first if the control is on map and if option `collapsed: false` in order to prevent calling `expand()` for nothing.

* Test(ControlLayers): 2 tests for collapsed: false being scrollable

(for issue #5328).
CAUTION: unlike most other tests, had to actually insert the map container into the DOM (i.e. `document.body`) for these tests to be useful, otherwise the height remains at 0.
This may lead to memory leak and tests hanging if done on too many tests (see Leaflet.markercluster tests issue, e.g. https://github.com/Leaflet/Leaflet.markercluster/pull/577)

spec/suites/control/Control.LayersSpec.js

@@ -178,6 +178,52 @@ describe("Control.Layers", function () {
 			happen.click(map._container);
 			expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
 		});
+		it('is scrollable if necessary when added on map', function () {
+			var layersCtrl = L.control.layers(null, null, {collapsed: false}),
+			    div = document.createElement('div'),
+			    i = 0;
+
+			// Need to create a DIV with specified height and insert it into DOM, so that the browser
+			// gives it an actual size.
+			map.remove();
+			div.style.height = div.style.width = '200px';
+			document.body.appendChild(div);
+			map = L.map(div);
+
+			for (; i < 20; i += 1) {
+				// Default text size: 12px => 12 * 20 = 240px height (not even considering padding/margin).
+				layersCtrl.addOverlay(L.marker([0, 0]), i);
+			}
+
+			layersCtrl.addTo(map);
+
+			expect(div.clientHeight).to.be.greaterThan(0); // Make sure first that the map container has a height, otherwise this test is useless.
+			expect(div.clientHeight).to.be.greaterThan(layersCtrl._container.clientHeight);
+			expect(layersCtrl._form.classList.contains('leaflet-control-layers-scrollbar')).to.be(true);
+		});
+		it('becomes scrollable if necessary when too many layers are added while it is already on map', function () {
+			var layersCtrl = L.control.layers(null, null, {collapsed: false}),
+			    div = document.createElement('div'),
+			    i = 0;
+
+			// Need to create a DIV with specified height and insert it into DOM, so that the browser
+			// gives it an actual size.
+			map.remove();
+			div.style.height = div.style.width = '200px';
+			document.body.appendChild(div);
+			map = L.map(div);
+
+			layersCtrl.addTo(map);
+			expect(layersCtrl._form.classList.contains('leaflet-control-layers-scrollbar')).to.be(false);
+
+			for (; i < 20; i += 1) {
+				// Default text size: 12px => 12 * 20 = 240px height (not even considering padding/margin).
+				layersCtrl.addOverlay(L.marker([0, 0]), i);
+			}
+
+			expect(div.clientHeight).to.be.greaterThan(layersCtrl._container.clientHeight);
+			expect(layersCtrl._form.classList.contains('leaflet-control-layers-scrollbar')).to.be(true);
+		});
 	});
 
 	describe("sortLayers", function () {

src/control/Control.Layers.js

@@ -103,6 +103,12 @@ export var Layers = Control.extend({
 		return this._container;
 	},
 
+	addTo: function (map) {
+		L.Control.prototype.addTo.call(this, map);
+		// Trigger expand after Layers Control has been inserted into DOM so that is now has an actual height.
+		return this._expandIfNotCollapsed();
+	},
+
 	onRemove: function () {
 		this._map.off('zoomend', this._checkDisabledLayers, this);
 
@@ -241,6 +247,8 @@ export var Layers = Control.extend({
 			this._lastZIndex++;
 			layer.setZIndex(this._lastZIndex);
 		}
+
+		this._expandIfNotCollapsed();
 	},
 
 	_update: function () {
@@ -392,6 +400,13 @@ export var Layers = Control.extend({
 		}
 	},
 
+	_expandIfNotCollapsed: function () {
+		if (this._map && !this.options.collapsed) {
+			this.expand();
+		}
+		return this;
+	},
+
 	_expand: function () {
 		// Backward compatibility, remove me in 1.1.
 		return this.expand();