mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 22:39:39 +00:00
0ae4b78cbc
The custom context menu provided by the frontend exposes widget specific options. In order to support renaming, promotion, and favoriting, there needs to be a way to access this context menu when targeting a textarea. However, always displaying this custom context menu will cause the user to lose access to browser specific functionality like spell checking, translation, and the ability to copy paste text. This PR updates the behaviour so that the native browser context menu will display when the text area already has focus. Our custom frontend context menu will continue to display when it does not. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10454-Use-native-context-menu-for-focused-textareas-32d6d73d365081909673d81d6a6ba054) by [Unito](https://www.unito.io)
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import {
|
|
comfyExpect as expect,
|
|
comfyPageFixture as test
|
|
} from '../../../../fixtures/ComfyPage'
|
|
import type { ComfyPage } from '../../../../fixtures/ComfyPage'
|
|
|
|
test.describe('Vue Multiline String Widget', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
|
|
const getFirstClipNode = (comfyPage: ComfyPage) =>
|
|
comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
|
|
|
|
const getFirstMultilineStringWidget = (comfyPage: ComfyPage) =>
|
|
getFirstClipNode(comfyPage).getByRole('textbox', { name: 'text' })
|
|
|
|
test('should allow entering text', async ({ comfyPage }) => {
|
|
const textarea = getFirstMultilineStringWidget(comfyPage)
|
|
await textarea.fill('Hello World')
|
|
await expect(textarea).toHaveValue('Hello World')
|
|
await textarea.fill('Hello World 2')
|
|
await expect(textarea).toHaveValue('Hello World 2')
|
|
})
|
|
|
|
test('should support entering multiline content', async ({ comfyPage }) => {
|
|
const textarea = getFirstMultilineStringWidget(comfyPage)
|
|
|
|
const multilineValue = ['Line 1', 'Line 2', 'Line 3'].join('\n')
|
|
|
|
await textarea.fill(multilineValue)
|
|
await expect(textarea).toHaveValue(multilineValue)
|
|
})
|
|
|
|
test('should retain value after focus changes', async ({ comfyPage }) => {
|
|
const textarea = getFirstMultilineStringWidget(comfyPage)
|
|
|
|
await textarea.fill('Keep me around')
|
|
|
|
// Click another node
|
|
const loadCheckpointNode =
|
|
comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
|
|
await loadCheckpointNode.click()
|
|
await getFirstClipNode(comfyPage).click()
|
|
|
|
await expect(textarea).toHaveValue('Keep me around')
|
|
})
|
|
test('should use native context menu when focused', async ({ comfyPage }) => {
|
|
const textarea = getFirstMultilineStringWidget(comfyPage)
|
|
const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
|
|
|
|
await textarea.focus()
|
|
await textarea.click({ button: 'right' })
|
|
await expect(vueContextMenu).not.toBeVisible()
|
|
await textarea.blur()
|
|
|
|
await textarea.click({ button: 'right' })
|
|
await expect(vueContextMenu).toBeVisible()
|
|
})
|
|
})
|