refactor(tiles): the picker's outside-click close loses its left-click leftovers

The Tiles picker opens on right-click now. Three pieces only served the
left-click picker: stopPropagation on the opening event, the tick of delay
before the outside-click listener went in (so the opening click could not
close it), and the exception for clicks on the Tiles button. A right-click
fires no click event, and a left click on the button runs toggleTileGrid,
which closes the picker before the click reaches the document. The
preventDefault that keeps the browser menu away stays.

The outside-click close had no test: tile-grid-open-set now checks that a
click inside the picker leaves it open and one elsewhere closes it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-10-07 09:37:03 +02:00
parent b965c3d346
commit 4558536676
2 changed files with 25 additions and 9 deletions
+5 -8
View File
@@ -375,10 +375,8 @@ Object.assign(CodemanApp.prototype, {
* replaces its set.
*/
openTilePicker(event) {
// As the split picker: the opening event must not reach the outside-click
// listener this call installs.
// The right-click: the browser's own context menu stays away.
event?.preventDefault?.();
event?.stopPropagation?.();
if (this._tilePicker) {
this.closeTilePicker();
return;
@@ -472,18 +470,17 @@ Object.assign(CodemanApp.prototype, {
menu.style.top = `${rect.bottom + 4}px`;
menu.style.right = `${window.innerWidth - rect.right}px`;
}
// A click elsewhere or Escape closes it. A click on the Tiles button needs no
// exception: its own handler (toggleTileGrid) closes the picker first.
const onOutside = (e) => {
if (menu.contains?.(e.target) || e.target?.closest?.('.btn-tile-grid')) return;
if (menu.contains?.(e.target)) return;
this.closeTilePicker();
};
const onKey = (e) => {
if (e.key === 'Escape') this.closeTilePicker();
};
this._tilePicker = { menu, onOutside, onKey };
// Deferred a tick so the opening click (still bubbling) does not close it.
setTimeout(() => {
if (this._tilePicker?.menu === menu) document.addEventListener('click', onOutside);
}, 0);
document.addEventListener('click', onOutside);
document.addEventListener('keydown', onKey);
(boxes.find((b) => !b.disabled) || open).focus?.();
},