@sapudex/web-components 2.22.0 → 2.23.0

package/cypress/specs/SelectBox.cy.tsx

@@ -25,7 +25,7 @@ const fullComponent = <UDExSelectBox
   <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
 </UDExSelectBox>
 
-const multiSelect = <div style="width: 300px; position:relative;">
+const multiSelect = <div style="width: 350px; position:relative;">
   <a id="previous-focus" href="#">Previous focusable element</a>
   <UDExSelectBox
     id="select-box"
@@ -122,6 +122,7 @@ describe("SelectBox", () => {
     cy.mount(<UDExSelectBox></UDExSelectBox>);
 
     cy.get("[udex-select-box]").should("exist");
+    cy.get("[udex-select-box]").should("exist");
   });
 
   it("correct height style is applied", () => {
@@ -141,7 +142,9 @@ describe("SelectBox", () => {
   it("correct label is applied", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__label")
-    .should("have.text", "Programming languages")
+      .invoke('text')
+      .then((text) => text.trim())
+      .should("equal", "Programming languages");
   });
 
   it("correct supporting text is applied", () => {
@@ -155,15 +158,7 @@ describe("SelectBox", () => {
     cy.get("#select-box").find("udex-select-box-item").should("have.length", 15);
   });
 
-  it("render the search input if \"showSearchInput\" property is set", () => {
-    cy.mount(shortComponent);
-    cy.get("#select-box").invoke('attr', 'show-search-input', '');
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
-
-    cy.get("#select-box").shadow().find(".udex-filter-menu__search").should("exist");
-  });
-
-  it('click on trigger opens/closes the dropdown', () => {
+  it("click on trigger opens/closes the dropdown", () => {
     cy.mount(fullComponent);
     const trigger = cy.get("#select-box").shadow().find(".udex-text-field__trigger");
     trigger.click();
@@ -175,23 +170,7 @@ describe("SelectBox", () => {
     dropdown.should("not.have.attr","open");
   });
 
-  it('clicking on \"Space\" or \"Enter\" field should open/close dropdown', () => {
-    cy.mount(<div>
-      <UDExSelectBox id="select-box" label="Programming languages">
-      <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
-      </UDExSelectBox>
-    </div>);
-    cy.realPress("Tab");
-    cy.realPress("Space");
-
-    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr","open");
-
-    cy.realPress("Enter");
-
-    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("not.have.attr","open");
-  });
-
-  it('checking label and supporting text for the item', () => {
+  it("checking label and supporting text for the item", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
     .find(".udex-text-field__trigger")
@@ -208,7 +187,7 @@ describe("SelectBox", () => {
     .should("have.text", "Frontend web development");
   });
 
-  it('checking the custom content for the item', () => {
+  it("checking the custom content for the item", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
     .find(".udex-text-field__trigger")
@@ -221,31 +200,7 @@ describe("SelectBox", () => {
     .should("have.text", "Lorem ipsum");
   });
 
-  it('show search if filter has more than 14 items', () => {
-    cy.mount(fullComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
-
-    cy.get("#select-box")
-    .shadow()
-    .find(".udex-filter-menu__search")
-    .should("be.visible");
-  });
-
-  it('does not show search if filter has less than 14 items', () => {
-    cy.mount(shortComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
-
-    cy.get("#select-box")
-    .shadow()
-    .find(".udex-filter-menu__search")
-    .should("not.exist");
-  });
-
-  it('render the additional text in the item', () => {
+  it("render the additional text in the item", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
     cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
@@ -253,49 +208,42 @@ describe("SelectBox", () => {
     cy.get("@firstItem").should("have.attr", "additional-text", "Additional Text");
   });
 
-  it('render the first icon slot in the item', () => {
+  it("render the first icon slot in the item", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
     cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
     cy.get("@firstItem").find("#firstIcon").should("exist");
   });
 
-  it('render the second icon slot in the item', () => {
+  it("render the second icon slot in the item", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
     cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
     cy.get("@firstItem").find("#secondIcon").should("exist");
   });
 
-  it('should filter items based on search input', () => {
+  it("should filter items based on search input", () => {
     cy.mount(fullComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-filter-menu__search")
-    .shadow()
-    .find(".udex-search__field")
-    .click();
-    cy.realType("java");
+    .find(".udex-text-field__search").as("searchField");
 
+    cy.get("@searchField").click();
+    cy.realType("java");
 
-    cy.get("#select-box").shadow()
-    .find("udex-list-item")
+    cy.get("#select-box").shadow().find("udex-list-item")
     .should("have.length", 2);
+
+    cy.get("#select-box").shadow().find("udex-list-item").eq(0)
+    .shadow().find(".udex-list__item")
+    .should("include.text", "Java");
   });
 
-  it('test if reset searching value using resetSearch method', () => {
+  it("test if reset searching value using resetSearch method", () => {
     cy.mount(fullComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-filter-menu__search")
-    .shadow()
-    .find(".udex-search__field").as("searchField");
+    .find(".udex-text-field__search").as("searchField");
 
     cy.get("@searchField")
     .click();
@@ -311,7 +259,7 @@ describe("SelectBox", () => {
     .should("have.value", "");
   });
 
-  it('test if close dropdown using close method', () => {
+  it("test if close dropdown using close method", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
     .find(".udex-text-field__trigger")
@@ -328,16 +276,11 @@ describe("SelectBox", () => {
     .should("not.have.attr","open");
   });
 
-  it('should show empty msg if the search does not produce results', () => {
+  it("should show empty msg if the search does not produce results", () => {
     cy.mount(fullComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-filter-menu__search")
-    .shadow()
-    .find(".udex-search__field")
+    .find(".udex-text-field__search")
     .click();
     cy.realType("x");
 
@@ -346,7 +289,7 @@ describe("SelectBox", () => {
     .should("include.text", "No matches found.");
   });
 
-  it('show tooltip in display only mode', () => {
+  it("show tooltip in display only mode", () => {
     cy.mount(displayOnly);
 
     cy.get("#select-box").shadow()
@@ -358,80 +301,94 @@ describe("SelectBox", () => {
     .click();
 
     cy.get("@tagGroup")
-    .find("udex-tooltip").shadow()
-    .find(".udex-tooltip__pane")
+    .find("udex-tooltip")
     .should("have.attr", "open");
   });
 
-
-  it('focus on element with corresponding starting letter', () => {
-    const testLetterKey = "p";
+  it("dropdown opens on pressing the `ArrowDown` key on the search", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find(".udex-filter-menu__search")
-    .shadow()
-    .find(".udex-search__field")
-    .click();
+    .find(".udex-select-box__dropdown")
+    .should("have.attr","open");
+  });
 
-    cy.realPress("Tab")
-    cy.realPress(testLetterKey);
+  it("dropdown closes on pressing the `Escape`", () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(1)
-    .should("have.focus");
+    .find(".udex-text-field__search")
+    .realPress("Escape");
 
-    cy.realPress(testLetterKey);
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(5)
-    .should("have.focus");
+    .find(".udex-select-box__dropdown")
+    .should("not.have.attr","open");
   });
 
-  it('focus on element with corresponding starting letter filtered by search value', () =>{
-    cy.mount(fullComponent);
+  it("sets option label when Arrow Down key press on the list items", () => {
+    cy.mount(shortComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown")
+    .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find(".udex-filter-menu__search")
-    .shadow()
-    .find(".udex-search__field")
-    .click();
+    .find(".udex-text-field__single-label")
+    .should("have.text", "Python");
+  });
 
-    cy.realType("java");
-    cy.realPress("Tab");
-    cy.realPress("Tab");
-    cy.realPress("j");
+  it("sets option label when Arrow Up key press on the list items", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown")
+    .realPress("ArrowDown")
+    .realPress("ArrowUp");
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(0)
-    .should("have.focus");
+    .find(".udex-text-field__single-label")
+    .should("have.text", "JavaScript");
   });
 
-  it('keyboard focus navigation on ArrowDown and ArrowUp element', () => {
+  it("sets option label when End key press on the list items", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown")
+    .realPress("ArrowDown")
+    .realPress("End");
 
-    cy.realPress("ArrowDown");
-    cy.realPress("ArrowDown");
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__single-label")
+    .should("have.text", "Perl");
+  });
 
+  it("sets option label when Home key press on the list items", () => {
+    cy.mount(shortComponent);
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(2)
-    .should("have.focus");
+    .find(".udex-text-field__search")
+    .click()
+    .realPress("ArrowDown")
+    .realPress("ArrowDown")
+    .realPress("Home");
 
-    cy.realPress("ArrowUp");
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(1)
-    .should("have.focus");
+    .find(".udex-text-field__single-label")
+    .should("have.text", "JavaScript");
   });
 
-  it('SingleSelect mode - after clicking on the item dropdown is closed', () => {
+  it("SingleSelect mode - after clicking on the item dropdown is closed", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -445,7 +402,7 @@ describe("SelectBox", () => {
     dropdown.should("not.have.attr","open");
   });
 
-  it('SingleSelect mode - after clicking on the item it is selected', () => {
+  it("SingleSelect mode - after clicking on the item it is selected", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -458,7 +415,7 @@ describe("SelectBox", () => {
     .should("have.attr", "data-selected","true")
   });
 
-  it('SingleSelect mode - value sets on the field after clicking on the item ', () => {
+  it("SingleSelect mode - value sets on the field after clicking on the item", () => {
     cy.mount(shortComponent);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -471,7 +428,7 @@ describe("SelectBox", () => {
     .should("have.text", "JavaScript");
   });
 
-  it('MultiSelect mode - after clicking on the item dropdown is opened', () => {
+  it("MultiSelect mode - after clicking on the item dropdown is opened", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -484,7 +441,7 @@ describe("SelectBox", () => {
     .should("have.attr","open");
   });
 
-  it('MultiSelect mode - rendering tags after clicking on the items', () => {
+  it("MultiSelect mode - rendering tags after clicking on the items", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -501,7 +458,7 @@ describe("SelectBox", () => {
     .should("have.length", 3);
   });
 
-  it('MultiSelect mode - after clicking the delete icon of a tag removes it from the selection', () => {
+  it("MultiSelect mode - after clicking the delete icon of a tag removes it from the selection", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -524,9 +481,9 @@ describe("SelectBox", () => {
     .should("not.exist")
   });
 
-  it('MultiSelect mode - n more is applied after clicking on the items', () => {
+  it("MultiSelect mode - n more is applied after clicking on the items", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
     .find("udex-list-item").as("items")
@@ -535,8 +492,7 @@ describe("SelectBox", () => {
     cy.get("@items").eq(1).click();
     cy.get("@items").eq(2).click();
     cy.get("@items").eq(3).click();
-
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("body").realClick();
 
     cy.get("#select-box").shadow()
     .find("udex-tag-group").shadow()
@@ -545,9 +501,9 @@ describe("SelectBox", () => {
     .should("have.text", "2 more");
   });
 
-  it('MultiSelect mode - open dropdown after clicking on the more button', () => {
+  it("MultiSelect mode - open dropdown after clicking on the more button", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
     .find("udex-list-item").as("items")
@@ -556,8 +512,7 @@ describe("SelectBox", () => {
     cy.get("@items").eq(1).click();
     cy.get("@items").eq(2).click();
     cy.get("@items").eq(3).click();
-
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("body").realClick();
 
     cy.get("#select-box").shadow()
     .find("udex-tag-group").shadow()
@@ -570,9 +525,9 @@ describe("SelectBox", () => {
     .should("have.attr","open");
   });
 
-  it('MultiSelect mode - should truncate the tag when it is long and open the dropdown on click', () => {
+  it("MultiSelect mode - should truncate the tag when it is long and open the dropdown on click", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
     .find("udex-list-item").eq(4).click();
@@ -588,9 +543,9 @@ describe("SelectBox", () => {
     .should("have.text", "C# - is a general-purpose high-level programming language supporting multiple paradigms")
   });
 
-  it('MultiSelect mode - the truncated tag is selected when clicking on', () => {
+  it("MultiSelect mode - the truncated tag is selected when clicking on", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
     .find("udex-list-item").eq(4).click();
@@ -600,13 +555,11 @@ describe("SelectBox", () => {
     .find("udex-tag").as("tag")
 
     cy.get("@tag").click();
-    cy.get("#select-box").shadow().find(".udex-text-field__trigger").realClick();
 
-    cy.get("@tag")
-    .should("have.attr", "selected")
+    cy.get("@tag").should("have.attr", "selected")
   });
 
-  describe('Select Box group header tests', () => {
+  describe("Select Box group header tests", () => {
     it('MultiSelect mode - checks label and supporting text for the group header item', () => {
       cy.mount(groupHeader);
       cy.get("#select-box").shadow().as("select")
@@ -624,7 +577,7 @@ describe("SelectBox", () => {
       .should("have.text", "Digital Builders");
     });
 
-    it('MultiSelect mode - checks nonInteractive state for the group item header', () => {
+    it("MultiSelect mode - checks nonInteractive state for the group item header", () => {
       cy.mount(groupHeader);
       cy.get("udex-select-box-group-header")
       .then($el => {
@@ -639,7 +592,7 @@ describe("SelectBox", () => {
     });
   });
 
-  describe('Select Box focus tests', () => {
+  describe("Select Box focus tests", () => {
     it("focus moves to previous interactive element on the page when press Shift+Tab on a tag", () => {
       cy.mount(multiSelect);
       cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
@@ -662,10 +615,10 @@ describe("SelectBox", () => {
       .should("be.focused");
     });
 
-    it("focus moves to trigger when press Tab on a tag", () => {
+    it("focus moves to input search when press Tab on a tag", () => {
       cy.mount(selectAll);
       cy.get("#select-box").shadow().as("select");
-      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      cy.get("@select").find(".udex-text-field__search").as("trigger")
 
       cy.get("@trigger").click();
 
@@ -684,21 +637,19 @@ describe("SelectBox", () => {
 
       cy.realPress("Tab");
 
-      cy.get("@trigger")
-      .should("be.focused");
+      cy.get("@trigger").should("be.focused");
     });
 
     it("focus moves to previous interactive element on the page when press Shift+Tab on a trigger and no tags", () => {
       cy.mount(selectAll);
       cy.get("#select-box").shadow().as("select");
-      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      cy.get("@select").find(".udex-text-field__search").as("trigger")
 
       cy.get("@trigger").focus();
 
       cy.realPress(["Shift", "Tab"]);
 
-      cy.get("#previous-focus")
-      .should("be.focused");
+      cy.get("#previous-focus").should("be.focused");
     });
 
     it("focus moves to the first tag when press Shift+Tab on a trigger", () => {
@@ -730,14 +681,13 @@ describe("SelectBox", () => {
     it("focus moves to next interactive element on the page when press Tab on a trigger", () => {
       cy.mount(selectAll);
       cy.get("#select-box").shadow().as("select");
-      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      cy.get("@select").find(".udex-text-field__search").as("trigger")
 
       cy.get("@trigger").focus();
 
       cy.realPress(["Tab"]);
 
-      cy.get("#next-focus")
-      .should("be.focused");
+      cy.get("#next-focus").should("be.focused");
     });
 
     it("focus moves to next interactive element on the page when press Tab on a list item", () => {
@@ -757,7 +707,7 @@ describe("SelectBox", () => {
       .should("be.focused");
     });
 
-    it("focus moves to trigger when I press Shift+Tab on a list item and list has no search", () => {
+    it("focus moves to input when press Prev Tab on a list item", () => {
       cy.mount(selectAll);
       cy.get("#select-box").shadow().as("select");
       cy.get("@select").find(".udex-text-field__trigger").as("trigger")
@@ -770,12 +720,31 @@ describe("SelectBox", () => {
 
       cy.realPress(["Shift", "Tab"]);
 
-      cy.get("@trigger")
-      .should("be.focused");
+      cy.get("@select").find(".udex-text-field__search").should("be.focused");
+    });
+
+    it("focus moves to input and dropdown closes when press Esc on the list items", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").eq(1)
+      .click();
+
+      cy.realPress("Escape");
+
+      cy.get("@select").find(".udex-text-field__search").should("be.focused");
+
+      cy.get("@select")
+      .find(".udex-select-box__dropdown")
+      .should("not.have.attr","open");
     });
   });
 
-  describe('Select Box Select All header tests',async () => {
+  describe("Select Box Select All header tests",async () => {
     it("render the correct label for the Select All header", () => {
       cy.mount(selectAll);
       cy.get("#select-box").as("select");
@@ -813,8 +782,8 @@ describe("SelectBox", () => {
     });
   });
 
-  describe('Select Box events tests',async () => {
-    it('emit selection-change when list items clicked', () => {
+  describe("Select Box events tests",async () => {
+    it("emit selection-change when list items clicked", () => {
       cy.mount(fullComponent);
       cy.get("#select-box").then(select => {
         select.get(0).addEventListener("selection-change", cy.stub().as("selectionchange"));
@@ -831,75 +800,74 @@ describe("SelectBox", () => {
       .should("have.been.called");
     });
 
-    it('emit change-search when search field typing', () => {
+    it("emit open when dropdown list opened", () => {
       cy.mount(fullComponent);
       cy.get("#select-box").then(select => {
-        select.get(0).addEventListener("change-search", cy.stub().as("changesearch"));
+        select.get(0).addEventListener("open", cy.stub().as("open"));
       });
       cy.get("#select-box").shadow()
       .find(".udex-text-field__trigger")
       .click();
 
-      cy.get("#select-box").shadow()
-      .find(".udex-filter-menu__search")
-      .shadow()
-      .find(".udex-search__field")
-      .click();
-      cy.realType("java");
-
-      cy.get("@changesearch")
-      .should("have.been.called");
+      cy.get("@open").should("have.been.called");
     });
 
-    it("emit reset-search when search reset button is clicked", () => {
+    it("emit close when dropdown list closed", () => {
       cy.mount(fullComponent);
       cy.get("#select-box").then(select => {
-        select.get(0).addEventListener("reset-search", cy.stub().as("resetsearch"));
+        select.get(0).addEventListener("close", cy.stub().as("close"));
       });
-      cy.get("#select-box").shadow().as("select")
+      cy.get("#select-box").shadow()
       .find(".udex-text-field__trigger")
       .click();
-
-      cy.get("@select")
-      .find(".udex-filter-menu__search")
-      .shadow()
-      .find(".udex-search__field")
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
       .click();
-      cy.realType("java");
 
-      cy.get("@select")
-      .find(".udex-filter-menu__search")
-      .shadow()
-      .find("#reset-button")
+      cy.get("@close").should("have.been.called");
+    });
+
+    it("emit before-open when dropdown list opened", () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("before-open", cy.stub().as("beforeopen"));
+      });
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
       .click();
 
-      cy.get("@resetsearch")
-      .should("have.been.called");
+      cy.get("@beforeopen").should("have.been.called");
     });
 
-    it('emit submit-search when user presses Enter key in the search', () => {
+    it("emit before-close when dropdown list closed", () => {
       cy.mount(fullComponent);
       cy.get("#select-box").then(select => {
-        select.get(0).addEventListener("submit-search", cy.stub().as("submitsearch"));
+        select.get(0).addEventListener("before-close", cy.stub().as("beforeclose"));
       });
       cy.get("#select-box").shadow()
       .find(".udex-text-field__trigger")
       .click();
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
+      .click();
+
+      cy.get("@beforeclose").should("have.been.called");
+    });
 
+    it("emit change-search when search field typing", () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("change-search", cy.stub().as("changesearch"));
+      });
       cy.get("#select-box").shadow()
-      .find(".udex-filter-menu__search")
-      .shadow()
-      .find(".udex-search__field")
+      .find(".udex-text-field__search")
       .click();
       cy.realType("java");
 
-      cy.realPress("Enter");
-
-      cy.get("@submitsearch")
-      .should("have.been.called");
+      cy.get("@changesearch").should("have.been.called");
     });
 
-    it('emit remove when click on decline icon in the tag', () => {
+    it("emit remove when click on decline icon in the tag", () => {
       cy.mount(multiSelect);
       cy.get("#select-box").then(select => {
         select.get(0).addEventListener("remove", cy.stub().as("remove"));
@@ -925,7 +893,7 @@ describe("SelectBox", () => {
       .should("have.been.called");
     });
 
-    it('emit show-more when more button clicked', () => {
+    it("emit show-more when more button clicked", () => {
       cy.mount(multiSelect);
       cy.get("#select-box").then(select => {
         select.get(0).addEventListener("show-more", cy.stub().as("showmore"));
@@ -940,8 +908,7 @@ describe("SelectBox", () => {
       cy.get("@items").eq(1).click();
       cy.get("@items").eq(2).click();
       cy.get("@items").eq(3).click();
-
-      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("body").realClick();
 
       cy.get("#select-box").shadow()
       .find("udex-tag-group").shadow()
@@ -953,7 +920,7 @@ describe("SelectBox", () => {
       .should("have.been.called");
     });
 
-    it('emit first-icon-click when first icon clicked', () => {
+    it("emit first-icon-click when first icon clicked", () => {
       let eventType;
       let itemLabel;
       cy.mount(shortComponent);
@@ -973,7 +940,7 @@ describe("SelectBox", () => {
       });
     });
 
-    it('emit second-icon-click when second icon clicked', () => {
+    it("emit second-icon-click when second icon clicked", () => {
       let eventType;
       let itemAdditionalText;
       cy.mount(shortComponent);