Bugfix: Refocus map after using layers control (#9004) (#9005)

Co-authored-by: Florian Bischof <design.falke@gmail.com>
This commit is contained in:
Karl Chen
2025-03-01 12:12:26 -05:00
committed by GitHub
parent 45c795a515
commit 7fc600920d
3 changed files with 38 additions and 4 deletions

View File

@ -377,4 +377,37 @@ describe('Control.Layers', () => {
expect(elems[4].innerHTML.trim()).to.be.equal('Marker A');
});
});
it('refocus map after interaction', () => {
const baseLayers = {'Layer 1': new TileLayer(''), 'Layer 2': new TileLayer('')},
control = new Control.Layers(baseLayers).addTo(map);
const spy = sinon.spy(map.getContainer(), 'focus');
map.getContainer().focus();
expect(spy.calledOnce).to.be.true;
// simulate keyboard-click event
spy.resetHistory();
UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], {
screenX: 0,
screenY: 0,
});
expect(spy.calledOnce).to.be.false;
// simulate MouseEvent at 0, 1
spy.resetHistory();
UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], {
screenX: 0,
screenY: 1,
});
expect(spy.calledOnce).to.be.true;
// simulate MouseEvent
spy.resetHistory();
UIEventSimulator.fire('click', control._baseLayersList.getElementsByTagName('input')[0], {
screenX: 100, // random number - not 0
screenY: 100, // random number - not 0
});
expect(spy.calledOnce).to.be.true;
});
});

View File

@ -371,7 +371,7 @@ export const Layers = Control.extend({
return label;
},
_onInputClick() {
_onInputClick(e) {
// expanding the control on mobile with a click can cause adding a layer - we don't want this
if (this._preventClick) {
return;
@ -409,7 +409,7 @@ export const Layers = Control.extend({
this._handlingClick = false;
this._refocusOnMap();
this._refocusOnMap(e);
},
_checkDisabledLayers() {

View File

@ -104,8 +104,9 @@ export const Control = Class.extend({
},
_refocusOnMap(e) {
// if map exists and event is not a keyboard event
if (this._map && e && e.screenX > 0 && e.screenY > 0) {
// We exclude keyboard-click event to keep the focus on the control for accessibility.
// The position of keyboard-click events are x=0 and y=0.
if (this._map && e && !(e.screenX === 0 && e.screenY === 0)) {
this._map.getContainer().focus();
}
}