@dxc-technology/halstack-react 0.0.0-301f60b → 0.0.0-335f028

package/select/Select.test.js

@@ -317,8 +317,92 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-invalid")).toBe("true");
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
-  test("Disabled select - Clear all options action must be shown but not clickable", function () {
+  test("Renders with correct aria attributes", function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Example",
+      options: single_options
+    })),
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole;
+
+    var select = getByRole("combobox");
+    var label = getByText("test-select-label");
+    expect(select.getAttribute("aria-disabled")).toBe("false");
+    expect(select.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+    expect(select.getAttribute("aria-required")).toBe("true");
+    expect(select.getAttribute("aria-labelledby")).toBe(label.id);
+    expect(select.getAttribute("aria-activedescendant")).toBeNull();
+    expect(select.getAttribute("aria-invalid")).toBe("false");
+
+    _userEvent["default"].click(select);
+
+    var list = getByRole("listbox");
+    expect(select.getAttribute("aria-controls")).toBe(list.id);
+    expect(list.getAttribute("aria-multiselectable")).toBe("false");
+  });
+  test("Single selection: Renders with correct default value", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      name: "test",
+      defaultValue: "4",
+      options: single_options
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole,
+        getAllByRole = _render6.getAllByRole,
+        queryByRole = _render6.queryByRole,
+        container = _render6.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 04")).toBeTruthy();
+    expect(submitInput.value).toBe("4");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[7]);
+
+    expect(getByText("Option 08")).toBeTruthy();
+    expect(submitInput.value).toBe("8");
+  });
+  test("Multiple selection: Renders with correct default value", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      name: "test",
+      defaultValue: ["4", "2", "6"],
+      options: single_options,
+      multiple: true
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole,
+        getAllByRole = _render7.getAllByRole,
+        queryByRole = _render7.queryByRole,
+        container = _render7.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 02, Option 04, Option 06")).toBeTruthy();
+    expect(submitInput.value).toBe("4,2,6");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[5].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[2]);
+
+    expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
+    expect(submitInput.value).toBe("4,2,6,3");
+  });
+  test("Disabled select - Clear all options action must be shown but not clickable", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
@@ -326,9 +410,9 @@ describe("Select component tests", function () {
       searchable: true,
       multiple: true
     })),
-        getByRole = _render5.getByRole,
-        getByText = _render5.getByText,
-        queryByRole = _render5.queryByRole;
+        getByRole = _render8.getByRole,
+        getByText = _render8.getByText,
+        queryByRole = _render8.queryByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-disabled")).toBe("true");
@@ -342,7 +426,7 @@ describe("Select component tests", function () {
     expect(getByText("Option 01, Option 02")).toBeTruthy();
   });
   test("Focused select does not open the listbox", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
@@ -350,8 +434,8 @@ describe("Select component tests", function () {
       searchable: true,
       multiple: true
     })),
-        getByRole = _render6.getByRole,
-        queryByRole = _render6.queryByRole;
+        getByRole = _render9.getByRole,
+        queryByRole = _render9.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -363,14 +447,14 @@ describe("Select component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
+        getByRole = _render10.getByRole,
+        getAllByRole = _render10.getAllByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("true");
@@ -391,8 +475,7 @@ describe("Select component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "1",
-      error: null
+      value: "1"
     });
 
     _react2.fireEvent.focus(select);
@@ -401,22 +484,21 @@ describe("Select component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "1",
-      error: null
+      value: "1"
     });
   });
   test("Controlled - Optional constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       onBlur: onBlur,
       optional: true
     })),
-        getByRole = _render8.getByRole;
+        getByRole = _render11.getByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("false");
@@ -427,20 +509,19 @@ describe("Select component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(select.getAttribute("aria-invalid")).toBe("false");
   });
   test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole,
-        getAllByRole = _render9.getAllByRole,
-        queryByRole = _render9.queryByRole;
+        getByText = _render12.getByText,
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.getAllByRole,
+        queryByRole = _render12.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -460,12 +541,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-expanded")).toBe("false");
   });
   test("Non-Grouped Options - If an empty list of options is passed, the select is rendered but doestn't open the listbox", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: []
     })),
-        getByRole = _render10.getByRole,
-        queryByRole = _render10.queryByRole;
+        getByRole = _render13.getByRole,
+        queryByRole = _render13.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -477,17 +558,17 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Click in an option selects it and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: single_options,
       onChange: onChange
     })),
-        getByText = _render11.getByText,
-        getByRole = _render11.getByRole,
-        getAllByRole = _render11.getAllByRole,
-        queryByRole = _render11.queryByRole,
-        container = _render11.container;
+        getByText = _render14.getByText,
+        getByRole = _render14.getByRole,
+        getAllByRole = _render14.getAllByRole,
+        queryByRole = _render14.queryByRole,
+        container = _render14.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -497,8 +578,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getAllByRole("option")[2]);
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "3",
-      error: null
+      value: "3"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Option 03")).toBeTruthy();
@@ -511,16 +591,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Optional renders an empty first option (selected by default) with the placeholder as its label", function () {
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
       options: single_options,
       onChange: onChange,
       optional: true
     })),
-        getByRole = _render12.getByRole,
-        getAllByRole = _render12.getAllByRole,
-        getAllByText = _render12.getAllByText;
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        getAllByText = _render15.getAllByText;
 
     var select = getByRole("combobox");
 
@@ -532,8 +612,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getAllByRole("option")[0]);
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(getAllByText("Choose an option").length).toBe(1);
 
@@ -554,8 +633,7 @@ describe("Select component tests", function () {
     });
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(getAllByText("Choose an option").length).toBe(1);
 
@@ -568,13 +646,42 @@ describe("Select component tests", function () {
 
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
+  test("Non-Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: single_options,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        getByText = _render16.getByText,
+        queryByText = _render16.queryByText,
+        container = _render16.container;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].type(searchInput, "1");
+
+    expect(getByText("Placeholder example")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(12);
+
+    _userEvent["default"].type(searchInput, "123");
+
+    expect(queryByText("Placeholder example")).toBeFalsy();
+    expect(getByText("No matches found")).toBeTruthy();
+  });
   test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: svg_icon_options
     })),
-        getByRole = _render13.getByRole,
-        getAllByRole = _render13.getAllByRole;
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -584,13 +691,13 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(5);
   });
   test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: url_icon_options,
       optional: true
     })),
-        getByRole = _render14.getByRole,
-        getAllByRole = _render14.getAllByRole;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -600,12 +707,12 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(6);
   });
   test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render15.getByRole,
-        queryByRole = _render15.queryByRole;
+        getByRole = _render19.getByRole,
+        queryByRole = _render19.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -620,12 +727,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render16.getByRole,
-        queryByRole = _render16.queryByRole;
+        getByRole = _render20.getByRole,
+        queryByRole = _render20.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -647,12 +754,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render17.getByRole,
-        queryByRole = _render17.queryByRole;
+        getByRole = _render21.getByRole,
+        queryByRole = _render21.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -667,12 +774,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render18.getByRole,
-        queryByRole = _render18.queryByRole;
+        getByRole = _render22.getByRole,
+        queryByRole = _render22.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -696,16 +803,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       optional: true
     })),
-        getByText = _render19.getByText,
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        queryByRole = _render19.queryByRole;
+        getByText = _render23.getByText,
+        getByRole = _render23.getByRole,
+        getAllByRole = _render23.getAllByRole,
+        queryByRole = _render23.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -745,8 +852,7 @@ describe("Select component tests", function () {
     });
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "20",
-      error: null
+      value: "20"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Option 20")).toBeTruthy();
@@ -758,17 +864,17 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
     var onChange = jest.fn();
 
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render20.container,
-        getByText = _render20.getByText,
-        getByRole = _render20.getByRole,
-        getAllByRole = _render20.getAllByRole,
-        queryByRole = _render20.queryByRole;
+        container = _render24.container,
+        getByText = _render24.getByText,
+        getByRole = _render24.getByRole,
+        getAllByRole = _render24.getAllByRole,
+        queryByRole = _render24.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -782,8 +888,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getByRole("option"));
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "8",
-      error: null
+      value: "8"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Option 08")).toBeTruthy();
@@ -796,15 +901,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
     var onChange = jest.fn();
 
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render21.container,
-        getByText = _render21.getByText,
-        getByRole = _render21.getByRole;
+        container = _render25.container,
+        getByText = _render25.getByText,
+        getByRole = _render25.getByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -820,16 +925,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", function () {
     var onChange = jest.fn();
 
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render22.container,
-        getByText = _render22.getByText,
-        getByRole = _render22.getByRole,
-        getAllByRole = _render22.getAllByRole;
+        container = _render26.container,
+        getByText = _render26.getByText,
+        getByRole = _render26.getByRole,
+        getAllByRole = _render26.getAllByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -852,15 +957,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", function () {
     var onChange = jest.fn();
 
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render23.container,
-        getByRole = _render23.getByRole,
-        queryByRole = _render23.queryByRole;
+        container = _render27.container,
+        getByRole = _render27.getByRole,
+        queryByRole = _render27.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -878,15 +983,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", function () {
     var onChange = jest.fn();
 
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render24.container,
-        getByRole = _render24.getByRole,
-        queryByRole = _render24.queryByRole;
+        container = _render28.container,
+        getByRole = _render28.getByRole,
+        queryByRole = _render28.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -906,16 +1011,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", function () {
     var onChange = jest.fn();
 
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render25.container,
-        getByRole = _render25.getByRole,
-        getAllByRole = _render25.getAllByRole,
-        queryByTitle = _render25.queryByTitle;
+        container = _render29.container,
+        getByRole = _render29.getByRole,
+        getAllByRole = _render29.getAllByRole,
+        queryByTitle = _render29.queryByTitle;
 
     var searchInput = container.querySelectorAll("input")[1];
 
@@ -935,19 +1040,19 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
     var onChange = jest.fn();
 
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render26.getByText,
-        getAllByText = _render26.getAllByText,
-        getByRole = _render26.getByRole,
-        getAllByRole = _render26.getAllByRole,
-        queryByRole = _render26.queryByRole,
-        container = _render26.container;
+        getByText = _render30.getByText,
+        getAllByText = _render30.getAllByText,
+        getByRole = _render30.getByRole,
+        getAllByRole = _render30.getAllByRole,
+        queryByRole = _render30.queryByRole,
+        container = _render30.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -956,9 +1061,11 @@ describe("Select component tests", function () {
 
     expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
 
-    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["11"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[10]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["11"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getAllByText("Option 11").length).toBe(2);
 
@@ -981,31 +1088,33 @@ describe("Select component tests", function () {
       code: "Enter",
       keyCode: 13,
       charCode: 13
-    }); // expect(onChange).toHaveBeenCalledWith({ value: ["11", "19"], error: null });
-
+    });
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["11", "19"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getByText("Option 11, Option 19")).toBeTruthy();
     expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
     expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
-    expect(submitInput.value).toBe("11, 19");
+    expect(submitInput.value).toBe("11,19");
   });
   test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
 
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render27.getByText,
-        queryByText = _render27.queryByText,
-        getByRole = _render27.getByRole,
-        getAllByRole = _render27.getAllByRole,
-        queryByRole = _render27.queryByRole,
-        getByTitle = _render27.getByTitle,
-        queryByTitle = _render27.queryByTitle;
+        getByText = _render31.getByText,
+        queryByText = _render31.queryByText,
+        getByRole = _render31.getByRole,
+        getAllByRole = _render31.getAllByRole,
+        queryByRole = _render31.queryByRole,
+        getByTitle = _render31.getByTitle,
+        queryByTitle = _render31.queryByTitle;
 
     var select = getByRole("combobox");
 
@@ -1015,9 +1124,11 @@ describe("Select component tests", function () {
 
     _userEvent["default"].click(getAllByRole("option")[8]);
 
-    _userEvent["default"].click(getAllByRole("option")[13]); // expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[13]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["6", "9", "14"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy();
     expect(getByText("3", {
@@ -1026,6 +1137,10 @@ describe("Select component tests", function () {
 
     _userEvent["default"].click(getByTitle("Clear selection"));
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: [],
+      error: "This field is required. Please, enter a value."
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy();
     expect(queryByText("3")).toBeFalsy();
@@ -1034,7 +1149,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
     var onChange = jest.fn();
 
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
       options: single_options,
@@ -1042,10 +1157,10 @@ describe("Select component tests", function () {
       multiple: true,
       optional: true
     })),
-        getByText = _render28.getByText,
-        getAllByText = _render28.getAllByText,
-        getByRole = _render28.getByRole,
-        getAllByRole = _render28.getAllByRole;
+        getByText = _render32.getByText,
+        getAllByText = _render32.getAllByText,
+        getByRole = _render32.getByRole,
+        getAllByRole = _render32.getAllByRole;
 
     var select = getByRole("combobox");
     expect(getByText("(Optional)")).toBeTruthy();
@@ -1055,19 +1170,21 @@ describe("Select component tests", function () {
     expect(getAllByText("Choose an option").length).toBe(1);
     expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
 
-    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["1"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[0]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["1"]
+    });
     expect(getAllByText("Option 01").length).toBe(2);
   });
   test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render29.getByText,
-        getByRole = _render29.getByRole,
-        getAllByRole = _render29.getAllByRole;
+        getByText = _render33.getByText,
+        getByRole = _render33.getByRole,
+        getAllByRole = _render33.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1135,14 +1252,14 @@ describe("Select component tests", function () {
     expect(getByText("Option 06")).toBeTruthy();
   });
   test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render30.getByText,
-        getByRole = _render30.getByRole,
-        getAllByRole = _render30.getAllByRole,
-        queryByRole = _render30.queryByRole;
+        getByText = _render34.getByText,
+        getByRole = _render34.getByRole,
+        getAllByRole = _render34.getAllByRole,
+        queryByRole = _render34.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1210,14 +1327,14 @@ describe("Select component tests", function () {
     expect(getByText("Option 17")).toBeTruthy();
   });
   test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render31.getByText,
-        getByRole = _render31.getByRole,
-        getAllByRole = _render31.getAllByRole,
-        queryByRole = _render31.queryByRole;
+        getByText = _render35.getByText,
+        getByRole = _render35.getByRole,
+        getAllByRole = _render35.getAllByRole,
+        queryByRole = _render35.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1245,15 +1362,15 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-expanded")).toBe("false");
   });
   test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doestn't open the listbox", function () {
-    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: [{
         label: "Group 1",
         options: []
       }]
     })),
-        getByRole = _render32.getByRole,
-        queryByRole = _render32.queryByRole;
+        getByRole = _render36.getByRole,
+        queryByRole = _render36.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1265,17 +1382,17 @@ describe("Select component tests", function () {
   test("Grouped Options - Click in an option selects it and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: group_options,
       onChange: onChange
     })),
-        getByText = _render33.getByText,
-        getByRole = _render33.getByRole,
-        getAllByRole = _render33.getAllByRole,
-        queryByRole = _render33.queryByRole,
-        container = _render33.container;
+        getByText = _render37.getByText,
+        getByRole = _render37.getByRole,
+        getAllByRole = _render37.getAllByRole,
+        queryByRole = _render37.queryByRole,
+        container = _render37.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -1285,8 +1402,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getAllByRole("option")[8]);
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "oviedo",
-      error: null
+      value: "oviedo"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Oviedo")).toBeTruthy();
@@ -1299,16 +1415,16 @@ describe("Select component tests", function () {
   test("Grouped Options - Optional renders an empty first option (out of any group) with the placeholder as its label", function () {
     var onChange = jest.fn();
 
-    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
       options: group_options,
       onChange: onChange,
       optional: true
     })),
-        getByRole = _render34.getByRole,
-        getAllByRole = _render34.getAllByRole,
-        getAllByText = _render34.getAllByText;
+        getByRole = _render38.getByRole,
+        getAllByRole = _render38.getAllByRole,
+        getAllByText = _render38.getAllByText;
 
     var select = getByRole("combobox");
 
@@ -1320,8 +1436,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getAllByRole("option")[0]);
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(getAllByText("Placeholder example").length).toBe(1);
 
@@ -1342,8 +1457,7 @@ describe("Select component tests", function () {
     });
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(getAllByText("Placeholder example").length).toBe(1);
 
@@ -1356,14 +1470,43 @@ describe("Select component tests", function () {
 
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
+  test("Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: group_options,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render39.getByRole,
+        getAllByRole = _render39.getAllByRole,
+        getByText = _render39.getByText,
+        queryByText = _render39.queryByText,
+        container = _render39.container;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].type(searchInput, "ro");
+
+    expect(getByText("Placeholder example")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(6);
+
+    _userEvent["default"].type(searchInput, "roro");
+
+    expect(queryByText("Placeholder example")).toBeFalsy();
+    expect(getByText("No matches found")).toBeTruthy();
+  });
   test("Grouped Options - Renders icons correctly when passed with group options", function () {
-    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: grouped_icon_options,
       optional: true
     })),
-        getByRole = _render35.getByRole,
-        getAllByRole = _render35.getAllByRole;
+        getByRole = _render40.getByRole,
+        getAllByRole = _render40.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1373,12 +1516,12 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(11);
   });
   test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render36.getByRole,
-        queryByRole = _render36.queryByRole;
+        getByRole = _render41.getByRole,
+        queryByRole = _render41.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1393,12 +1536,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
-    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render37.getByRole,
-        queryByRole = _render37.queryByRole;
+        getByRole = _render42.getByRole,
+        queryByRole = _render42.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1420,12 +1563,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render38.getByRole,
-        queryByRole = _render38.queryByRole;
+        getByRole = _render43.getByRole,
+        queryByRole = _render43.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1440,12 +1583,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
-    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render39.getByRole,
-        queryByRole = _render39.queryByRole;
+        getByRole = _render44.getByRole,
+        queryByRole = _render44.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1469,16 +1612,16 @@ describe("Select component tests", function () {
   test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       optional: true
     })),
-        getByText = _render40.getByText,
-        getByRole = _render40.getByRole,
-        getAllByRole = _render40.getAllByRole,
-        queryByRole = _render40.queryByRole;
+        getByText = _render45.getByText,
+        getByRole = _render45.getByRole,
+        getAllByRole = _render45.getAllByRole,
+        queryByRole = _render45.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1518,8 +1661,7 @@ describe("Select component tests", function () {
     });
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "ebro",
-      error: null
+      value: "ebro"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Ebro")).toBeTruthy();
@@ -1531,17 +1673,17 @@ describe("Select component tests", function () {
   test("Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
     var onChange = jest.fn();
 
-    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render41.container,
-        getByText = _render41.getByText,
-        getByRole = _render41.getByRole,
-        getAllByRole = _render41.getAllByRole,
-        queryByRole = _render41.queryByRole;
+        container = _render46.container,
+        getByText = _render46.getByText,
+        getByRole = _render46.getByRole,
+        getAllByRole = _render46.getAllByRole,
+        queryByRole = _render46.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1561,8 +1703,7 @@ describe("Select component tests", function () {
     _userEvent["default"].click(getAllByRole("option")[4]);
 
     expect(onChange).toHaveBeenCalledWith({
-      value: "ebro",
-      error: null
+      value: "ebro"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Ebro")).toBeTruthy();
@@ -1575,15 +1716,15 @@ describe("Select component tests", function () {
   test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
     var onChange = jest.fn();
 
-    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render42.container,
-        getByText = _render42.getByText,
-        getByRole = _render42.getByRole;
+        container = _render47.container,
+        getByText = _render47.getByText,
+        getByRole = _render47.getByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1599,19 +1740,19 @@ describe("Select component tests", function () {
   test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
     var onChange = jest.fn();
 
-    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render43.getByText,
-        getAllByText = _render43.getAllByText,
-        getByRole = _render43.getByRole,
-        getAllByRole = _render43.getAllByRole,
-        queryByRole = _render43.queryByRole,
-        container = _render43.container;
+        getByText = _render48.getByText,
+        getAllByText = _render48.getAllByText,
+        getByRole = _render48.getByRole,
+        getAllByRole = _render48.getAllByRole,
+        queryByRole = _render48.queryByRole,
+        container = _render48.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -1620,9 +1761,11 @@ describe("Select component tests", function () {
 
     expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
 
-    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[10]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["bilbao"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getAllByText("Bilbao").length).toBe(2);
 
@@ -1645,31 +1788,33 @@ describe("Select component tests", function () {
       code: "Enter",
       keyCode: 13,
       charCode: 13
-    }); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao", "guadalquivir"], error: null });
-
+    });
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["bilbao", "guadalquivir"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
     expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
     expect(getAllByRole("option")[16].getAttribute("aria-selected")).toBe("true");
-    expect(submitInput.value).toBe("bilbao, guadalquivir");
+    expect(submitInput.value).toBe("bilbao,guadalquivir");
   });
   test("Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
 
-    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render44.getByText,
-        queryByText = _render44.queryByText,
-        getByRole = _render44.getByRole,
-        getAllByRole = _render44.getAllByRole,
-        queryByRole = _render44.queryByRole,
-        getByTitle = _render44.getByTitle,
-        queryByTitle = _render44.queryByTitle;
+        getByText = _render49.getByText,
+        queryByText = _render49.queryByText,
+        getByRole = _render49.getByRole,
+        getAllByRole = _render49.getAllByRole,
+        queryByRole = _render49.queryByRole,
+        getByTitle = _render49.getByTitle,
+        queryByTitle = _render49.queryByTitle;
 
     var select = getByRole("combobox");
 
@@ -1681,9 +1826,11 @@ describe("Select component tests", function () {
 
     _userEvent["default"].click(getAllByRole("option")[13]);
 
-    _userEvent["default"].click(getAllByRole("option")[17]); // expect(onChange).toHaveBeenCalledWith({ value: ["blanco", "oviedo", "duero", "ebro"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[17]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["blanco", "oviedo", "duero", "ebro"]
+    });
     expect(queryByRole("listbox")).toBeTruthy();
     expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
     expect(getByText("4", {
@@ -1700,7 +1847,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
     var onChange = jest.fn();
 
-    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
       options: group_options,
@@ -1708,10 +1855,10 @@ describe("Select component tests", function () {
       multiple: true,
       optional: true
     })),
-        getByText = _render45.getByText,
-        getAllByText = _render45.getAllByText,
-        getByRole = _render45.getByRole,
-        getAllByRole = _render45.getAllByRole;
+        getByText = _render50.getByText,
+        getAllByText = _render50.getAllByText,
+        getByRole = _render50.getByRole,
+        getAllByRole = _render50.getAllByRole;
 
     var select = getByRole("combobox");
     expect(getByText("(Optional)")).toBeTruthy();
@@ -1721,19 +1868,21 @@ describe("Select component tests", function () {
     expect(getAllByText("Choose an option").length).toBe(1);
     expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
 
-    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["azul"], error: null });
-
+    _userEvent["default"].click(getAllByRole("option")[0]);
 
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["azul"]
+    });
     expect(getAllByText("Azul").length).toBe(2);
   });
   test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render46.getByText,
-        getByRole = _render46.getByRole,
-        getAllByRole = _render46.getAllByRole;
+        getByText = _render51.getByText,
+        getByRole = _render51.getByRole,
+        getAllByRole = _render51.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1801,14 +1950,13 @@ describe("Select component tests", function () {
     expect(getByText("Verde")).toBeTruthy();
   });
   test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
-    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render47.getByText,
-        getByRole = _render47.getByRole,
-        getAllByRole = _render47.getAllByRole,
-        queryByRole = _render47.queryByRole;
+        getByText = _render52.getByText,
+        getByRole = _render52.getByRole,
+        getAllByRole = _render52.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1872,29 +2020,38 @@ describe("Select component tests", function () {
 
     expect(getByText("Azul")).toBeTruthy();
   });
-  test("Renders with correct aria attributes", function () {
-    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+  test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", function () {
+    var onChange = jest.fn();
+
+    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      placeholder: "Example",
-      options: single_options
+      options: single_options,
+      onChange: onChange,
+      multiple: true,
+      optional: true
     })),
-        getByText = _render48.getByText,
-        getByRole = _render48.getByRole;
+        getByRole = _render53.getByRole,
+        getAllByRole = _render53.getAllByRole,
+        getByTitle = _render53.getByTitle;
 
     var select = getByRole("combobox");
-    var label = getByText("test-select-label");
-    expect(select.getAttribute("aria-disabled")).toBe("false");
-    expect(select.getAttribute("aria-haspopup")).toBe("listbox");
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-    expect(select.getAttribute("aria-required")).toBe("true");
-    expect(select.getAttribute("aria-labelledby")).toBe(label.id);
-    expect(select.getAttribute("aria-activedescendant")).toBeNull();
-    expect(select.getAttribute("aria-invalid")).toBe("false");
 
     _userEvent["default"].click(select);
 
-    var list = getByRole("listbox");
-    expect(select.getAttribute("aria-controls")).toBe(list.id);
-    expect(list.getAttribute("aria-multiselectable")).toBe("false");
+    _userEvent["default"].click(getAllByRole("option")[5]);
+
+    _userEvent["default"].click(getAllByRole("option")[8]);
+
+    _userEvent["default"].click(getAllByRole("option")[13]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: ["6", "9", "14"]
+    });
+
+    _userEvent["default"].click(getByTitle("Clear selection"));
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: []
+    });
   });
 });