From 8bb8ae30e16935bb69db347c8c58bb30fdbbfc15 Mon Sep 17 00:00:00 2001 From: Victor Gonzalez Date: Wed, 6 May 2026 14:10:50 +0200 Subject: [PATCH 1/2] fix: append color picker popup to dialog element (#12344) --- web_src/js/features/colorpicker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index 6d00d908c9..33aa86375f 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -49,6 +49,7 @@ function initPicker(el) { content: picker, placement: 'bottom-start', interactive: true, + appendTo: input.closest('dialog') ?? document.body, onShow() { updatePicker(picker, input.value); }, From 5ccb9e815a6badffb5f023bd234125988be569d6 Mon Sep 17 00:00:00 2001 From: Victor Gonzalez Date: Wed, 6 May 2026 14:24:41 +0200 Subject: [PATCH 2/2] tests: add e2e test for color picker visibility in new label dialog (#12344) Signed-off-by: Victor Gonzalez --- tests/e2e/label-colorpicker.test.e2e.ts | 35 +++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 tests/e2e/label-colorpicker.test.e2e.ts diff --git a/tests/e2e/label-colorpicker.test.e2e.ts b/tests/e2e/label-colorpicker.test.e2e.ts new file mode 100644 index 0000000000..da2dee7c92 --- /dev/null +++ b/tests/e2e/label-colorpicker.test.e2e.ts @@ -0,0 +1,35 @@ +// Copyright 2026 The Forgejo Authors. All rights reserved. +// SPDX-License-Identifier: GPL-3.0-or-later + +// @watch start +// web_src/js/features/colorpicker.js +// templates/repo/issue/labels/label_new.tmpl +// @watch end + +import {expect} from '@playwright/test'; +import {test} from './utils_e2e.ts'; + +test.use({user: 'user2'}); + +test('Color picker is visible above the new label dialog', async ({page}) => { + const response = await page.goto('/user2/repo1/labels'); + expect(response?.status()).toBe(200); + + // Open the "New label" dialog + await page.getByRole('button', {name: 'New label'}).click(); + const dialog = page.locator('dialog#new-label-modal'); + await expect(dialog).toBeVisible(); + + // Click the color preview square to open the color picker popup + const colorInput = dialog.locator('.js-color-picker-input input[name="color"]'); + await colorInput.click(); + + // The hex-color-picker should be visible and not hidden behind the dialog + const picker = dialog.locator('hex-color-picker'); + await expect(picker).toBeVisible(); + + // Verify the picker tippy popup is a descendant of the dialog element, + // not appended to document.body (which would render below the dialog top layer) + const pickerInDialog = dialog.locator('.tippy-box hex-color-picker'); + await expect(pickerInDialog).toBeVisible(); +});