diff --git a/packages/editor-ui/src/components/RunDataSearch.vue b/packages/editor-ui/src/components/RunDataSearch.vue index 648d956a1d..79acb53c22 100644 --- a/packages/editor-ui/src/components/RunDataSearch.vue +++ b/packages/editor-ui/src/components/RunDataSearch.vue @@ -26,7 +26,6 @@ const locale = useI18n(); const inputRef = ref(null); const maxWidth = ref(INITIAL_WIDTH); const opened = ref(false); -const focused = ref(false); const placeholder = computed(() => props.paneType === 'input' ? locale.baseText('ndv.search.placeholder.input') @@ -34,11 +33,13 @@ const placeholder = computed(() => ); const documentKeyHandler = (event: KeyboardEvent) => { - const isTargetAnyFormElement = + const isTargetFormElementOrEditable = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || - event.target instanceof HTMLSelectElement; - if (event.key === '/' && !focused.value && props.isAreaActive && !isTargetAnyFormElement) { + event.target instanceof HTMLSelectElement || + (event.target as HTMLElement)?.getAttribute?.('contentEditable') === 'true'; + + if (event.key === '/' && props.isAreaActive && !isTargetFormElementOrEditable) { inputRef.value?.focus(); inputRef.value?.select(); } @@ -49,13 +50,11 @@ const onSearchUpdate = (value: string) => { }; const onFocus = () => { opened.value = true; - focused.value = true; maxWidth.value = '30%'; inputRef.value?.select(); emit('focus'); }; const onBlur = () => { - focused.value = false; if (!props.modelValue) { opened.value = false; maxWidth.value = INITIAL_WIDTH; diff --git a/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts b/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts index 25cadd2c3b..55634aeab2 100644 --- a/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts +++ b/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts @@ -2,21 +2,14 @@ import userEvent from '@testing-library/user-event'; import { createPinia, setActivePinia } from 'pinia'; import { createComponentRenderer } from '@/__tests__/render'; import RunDataSearch from '@/components/RunDataSearch.vue'; -import { useSettingsStore } from '@/stores/settings.store'; -import { useUIStore } from '@/stores/ui.store'; const renderComponent = createComponentRenderer(RunDataSearch); let pinia: ReturnType; -let uiStore: ReturnType; -let settingsStore: ReturnType; describe('RunDataSearch', () => { beforeEach(() => { pinia = createPinia(); setActivePinia(pinia); - - uiStore = useUIStore(); - settingsStore = useSettingsStore(); }); it('should not be focused on keyboard shortcut when area is not active', async () => { @@ -66,7 +59,6 @@ describe('RunDataSearch', () => { }); it('should select all text when focused', async () => { - vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled', 'get').mockReturnValue(() => true); const { getByRole, emitted } = renderComponent({ pinia, props: { @@ -91,4 +83,41 @@ describe('RunDataSearch', () => { expect(isSelected).toBe(true); }); + + it('should not be focused on keyboard shortcut when a contenetEditable element is active', async () => { + const { getByTestId } = createComponentRenderer({ + components: { + RunDataSearch, + }, + template: ` +
+
+ +
+ `, + props: { + modelValue: { + type: String, + default: '', + }, + isAreaActive: { + type: Boolean, + default: true, + }, + }, + })({ + pinia, + }); + + const user = userEvent.setup(); + const contentEditableElement = getByTestId('mock-contenteditable'); + await user.click(contentEditableElement); + expect(document.activeElement).toBe(contentEditableElement); + await user.type(contentEditableElement, '/'); + expect(contentEditableElement.textContent).toBe('/'); + expect(getByTestId('ndv-search')).not.toHaveFocus(); + }); });