mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: fix tags dropdown in duplicate wf modal

Browse source
This commit is contained in:
Alex Grozav 2023-07-26 15:39:40 +03:00
parent 2ad5da5faf
commit 7840788d95
3 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
cypress/e2e/17-workflow-tags.cy.ts
View file

@ -85,9 +85,7 @@ describe('Workflow tags', () => {
wf.getters.createTagButton().click(); wf.getters.createTagButton().click();
wf.actions.addTags(TEST_TAGS); wf.actions.addTags(TEST_TAGS);
wf.getters.nthTagPill(1).click(); wf.getters.nthTagPill(1).click();
cy.wait(300); wf.getters.tagsInDropdown().filter('.selected').first().click();
wf.getters.tagsDropdown().click(0, 0);
wf.getters.tagsDropdown().find('li.selected').first().click();
cy.get('body').click(0, 0); cy.get('body').click(0, 0);
wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1); wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
}); });

2
cypress/pages/workflow.ts
View file

@ -17,7 +17,7 @@ export class WorkflowPage extends BasePage {
nthTagPill: (n: number) => nthTagPill: (n: number) =>
cy.get(`[data-test-id="workflow-tags-container"] span.tags > span:nth-child(${n})`), cy.get(`[data-test-id="workflow-tags-container"] span.tags > span:nth-child(${n})`),
tagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'), tagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
tagsInDropdown: () => cy.getByTestId('workflow-tags-dropdown').find('li').filter('.tag'), tagsInDropdown: () => getVisibleSelect().find('li').filter('.tag'),
createTagButton: () => cy.getByTestId('new-tag-link'), createTagButton: () => cy.getByTestId('new-tag-link'),
saveButton: () => cy.getByTestId('workflow-save-button'), saveButton: () => cy.getByTestId('workflow-save-button'),
nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'), nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),

38
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -5,7 +5,7 @@
v-on-click-outside="onClickOutside" v-on-click-outside="onClickOutside"
> >
<n8n-select <n8n-select
:teleported="false" :teleported="true"
:modelValue="appliedTags" :modelValue="appliedTags"
:loading="isLoading" :loading="isLoading"
:placeholder="placeholder" :placeholder="placeholder"
@ -13,8 +13,9 @@
filterable filterable
multiple multiple
:allowCreate="createEnabled" :allowCreate="createEnabled"
:reserve-keyword="false"
default-first-option default-first-option
ref="select" ref="selectRef"
loading-text="..." loading-text="..."
popper-class="tags-dropdown" popper-class="tags-dropdown"
@update:modelValue="onTagsUpdated" @update:modelValue="onTagsUpdated"
@ -26,7 +27,7 @@
:key="CREATE_KEY" :key="CREATE_KEY"
:value="CREATE_KEY" :value="CREATE_KEY"
class="ops" class="ops"
ref="create" ref="createRef"
> >
<font-awesome-icon icon="plus-circle" /> <font-awesome-icon icon="plus-circle" />
<span> <span>
@ -48,7 +49,7 @@
:key="tag.id + '_' + i" :key="tag.id + '_' + i"
:label="tag.name" :label="tag.name"
class="tag" class="tag"
ref="tag" ref="tagRefs"
/> />
<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags"> <n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
@ -154,11 +155,13 @@ export default defineComponent({
emit('esc'); emit('esc');
} else if (keyboardEvent.key === 'Enter' && filter.value.length === 0) { } else if (keyboardEvent.key === 'Enter' && filter.value.length === 0) {
preventUpdate.value = true; preventUpdate.value = true;
emit('blur');
if (typeof selectRef.value?.blur === 'function') { // Disable blur event due to element-plus handler changes
selectRef.value.blur(); // emit('blur');
} //
// if (typeof selectRef.value?.blur === 'function') {
// selectRef.value.blur();
// }
} }
}); });
} }
@ -207,8 +210,6 @@ export default defineComponent({
(value) => !allTags.value.find((tag) => tag.id === value) || value === CREATE_KEY, (value) => !allTags.value.find((tag) => tag.id === value) || value === CREATE_KEY,
); );
console.log({ manage, create, selected });
if (manage) { if (manage) {
filter.value = ''; filter.value = '';
uiStore.openModal(TAGS_MANAGER_MODAL_KEY); uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
@ -226,12 +227,13 @@ export default defineComponent({
function focusOnTopOption() { function focusOnTopOption() {
// focus on create option // focus on create option
if (createRef.value?.hoverItem) { if (createRef.value?.focus) {
createRef.value.hoverItem(); createRef.value.focus();
} }
// focus on top option after filter // focus on top option after filter
else if (tagRefs.value?.[0]?.hoverItem) { else if (tagRefs.value?.[0]?.$el.focus) {
tagRefs.value[0].hoverItem(); tagRefs.value[0].$el.focus();
console.log('focusing', tagRefs.value[0].$el);
} }
} }
@ -265,10 +267,14 @@ export default defineComponent({
} }
function onClickOutside(e: Event) { function onClickOutside(e: Event) {
const tagsDropdown = document.querySelector('.tags-dropdown');
const tagsModal = document.querySelector('#tags-manager-modal'); const tagsModal = document.querySelector('#tags-manager-modal');
const clickInsideTagsModal = tagsModal?.contains(e.target as Node);
if (!clickInsideTagsModal && e.type === 'click') { const clickInsideTagsDropdowns =
tagsDropdown?.contains(e.target as Node) || tagsDropdown === e.target;
const clickInsideTagsModal = tagsModal?.contains(e.target as Node) || tagsModal === e.target;
if (!clickInsideTagsDropdowns && !clickInsideTagsModal && e.type === 'click') {
emit('blur'); emit('blur');
} }
} }