Как реализовать контекстное меню в таблице с позиционированием в зависимости от положения ячейки и экрана?

Что проверяют

Знаете ли вы системы координат браузера и умеете ли довести меню до рабочего состояния: у края экрана, в прокручиваемой таблице, с клавиатуры. Показать меню по contextmenu умеют все, отличает ответ логика переворота и закрытия. Следом спрашивают про доступность и готовые решения.

Как отвечать

Каркас:

• один обработчик на таблицу: contextmenu вешается на table, ячейка находится через e.target.closest('td'), из неё берутся id строки и колонки. e.preventDefault() отменяет системное меню;
• координаты в одной системе: меню с position: fixed ставится по clientX и clientY и сравнивается с window.innerWidth и innerHeight. Для привязки к ячейке, например по кнопке «…», берите cell.getBoundingClientRect();
• переворот и прижим: меню рендерится невидимым и измеряется. Не помещается снизу, открывается вверх от точки, не помещается справа, открывается влево. Затем координаты прижимаются к краям;
• обрезка контейнером: таблица в блоке с overflow: auto обрежет абсолютно позиционированное меню. Его выносят в портал (createPortal в document.body) или в верхний слой через атрибут popover;
• закрытие: клик мимо по pointerdown, Escape, прокрутка, изменение размеров окна, потеря фокуса;
• доступность: role="menu" и role="menuitem", стрелки для навигации, возврат фокуса в ячейку после закрытия. Меню открывается и с клавиатуры, по Shift+F10 или клавише меню, и тогда позицию берут от ячейки в фокусе, а не от курсора.

В реальном проекте разумно взять Floating UI: middleware offset, flip и shift делают переворот и прижим, autoUpdate следит за прокруткой. Нативная альтернатива: CSS anchor positioning с position-try-fallbacks, но поддержку браузерами надо проверять.

Где спотыкаются

Смешивают системы координат: ставят pageY и сравнивают его с innerHeight. После прокрутки страницы меню уезжает за экран.

Измеряют меню, пока оно под display: none: offsetWidth равен нулю, и проверка границ ничего не делает.

Привязывают меню к DOM-узлу строки в виртуализированной таблице. При прокрутке узел переиспользуется под другую строку, и действие применяется не к той записи.