@dxc-technology/halstack-react 0.0.0-ff5083e → 0.0.0-ff6c8bf

package/text-input/TextInput.test.js

@@ -1,70 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _TextInput = _interopRequireDefault(require("./TextInput"));
-
+var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
 var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
 describe("TextInput component tests", function () {
-  test("Renders with correct label", function () {
+  test("Renders with correct error aria attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label"
-    })),
-        getByText = _render.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-  });
-  test("Renders with correct label and helper text", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      helperText: "Example helper text"
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct label and optional", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      helperText: "Example helper text",
-      optional: true
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct placeholder", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      placeholder: "Placeholder"
-    })),
-        getByRole = _render4.getByRole;
-
-    var input = getByRole("textbox");
-    expect(input.getAttribute("placeholder")).toBe("Placeholder");
-  });
-  test("Renders with error message and correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Error label",
-      placeholder: "Placeholder",
-      error: "Error message."
-    })),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
-
+        label: "Error label",
+        placeholder: "Placeholder",
+        error: "Error message."
+      })),
+      getByText = _render.getByText,
+      getByRole = _render.getByRole;
     var input = getByRole("textbox");
     var errorMessage = getByText("Error message.");
     expect(errorMessage).toBeTruthy();
@@ -73,49 +58,40 @@ describe("TextInput component tests", function () {
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
   test("Renders with correct initial value", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Default label",
-      placeholder: "Placeholder",
-      defaultValue: "Example text"
-    })),
-        getByRole = _render6.getByRole;
-
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Default label",
+        placeholder: "Placeholder",
+        defaultValue: "Example text"
+      })),
+      getByRole = _render2.getByRole;
     var input = getByRole("textbox");
     expect(input.value).toBe("Example text");
   });
   test("Not optional constraint (onBlur)", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      onBlur: onBlur,
-      clearable: true
-    })),
-        getByRole = _render7.getByRole;
-
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        onBlur: onBlur,
+        clearable: true
+      })),
+      getByRole = _render3.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.focus(input);
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
       error: "This field is required. Please, enter a value."
     });
-
     _react2.fireEvent.change(input, {
       target: {
         value: "Test"
       }
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "Test"
@@ -123,30 +99,24 @@ describe("TextInput component tests", function () {
   });
   test("Not optional constraint (onChange)", function () {
     var onChange = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      clearable: true
-    })),
-        getByRole = _render8.getByRole;
-
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        clearable: true
+      })),
+      getByRole = _render4.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.change(input, {
       target: {
         value: "Test"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "Test"
     });
-
     _userEvent["default"].clear(input);
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "",
@@ -156,58 +126,47 @@ describe("TextInput component tests", function () {
   test("Pattern constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      onBlur: onBlur,
-      margin: {
-        left: "medium",
-        right: "medium"
-      },
-      clearable: true,
-      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
-    })),
-        getByRole = _render9.getByRole;
-
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        onBlur: onBlur,
+        margin: {
+          left: "medium",
+          right: "medium"
+        },
+        clearable: true,
+        pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+      })),
+      getByRole = _render5.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.change(input, {
       target: {
         value: "pattern test"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "pattern test",
       error: "Please match the format requested."
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "pattern test",
       error: "Please match the format requested."
     });
-
     _userEvent["default"].clear(input);
-
     _react2.fireEvent.change(input, {
       target: {
         value: "pattern4&"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "pattern4&"
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "pattern4&"
@@ -216,59 +175,48 @@ describe("TextInput component tests", function () {
   test("Length constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      onBlur: onBlur,
-      margin: {
-        left: "medium",
-        right: "medium"
-      },
-      clearable: true,
-      minLength: 5,
-      maxLength: 10
-    })),
-        getByRole = _render10.getByRole;
-
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        onBlur: onBlur,
+        margin: {
+          left: "medium",
+          right: "medium"
+        },
+        clearable: true,
+        minLength: 5,
+        maxLength: 10
+      })),
+      getByRole = _render6.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.change(input, {
       target: {
         value: "test"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
       error: "Min length 5, max length 10."
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
       error: "Min length 5, max length 10."
     });
-
     _userEvent["default"].clear(input);
-
     _react2.fireEvent.change(input, {
       target: {
         value: "length"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "length"
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "length"
@@ -277,78 +225,64 @@ describe("TextInput component tests", function () {
   test("Pattern and length constraints", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      placeholder: "Placeholder",
-      onChange: onChange,
-      onBlur: onBlur,
-      margin: {
-        left: "medium",
-        right: "medium"
-      },
-      clearable: true,
-      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
-      minLength: 5,
-      maxLength: 10
-    })),
-        getByRole = _render11.getByRole;
-
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        placeholder: "Placeholder",
+        onChange: onChange,
+        onBlur: onBlur,
+        margin: {
+          left: "medium",
+          right: "medium"
+        },
+        clearable: true,
+        pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
+        minLength: 5,
+        maxLength: 10
+      })),
+      getByRole = _render7.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.change(input, {
       target: {
         value: "test"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
       error: "Min length 5, max length 10."
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
       error: "Min length 5, max length 10."
     });
-
     _react2.fireEvent.change(input, {
       target: {
         value: "tests"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "tests",
       error: "Please match the format requested."
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "tests",
       error: "Please match the format requested."
     });
-
     _react2.fireEvent.change(input, {
       target: {
         value: "tests4&"
       }
     });
-
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "tests4&"
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "tests4&"
@@ -356,17 +290,13 @@ describe("TextInput component tests", function () {
   });
   test("onChange function is called correctly", function () {
     var onChange = jest.fn();
-
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      onChange: onChange
-    })),
-        getByRole = _render12.getByRole;
-
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        onChange: onChange
+      })),
+      getByRole = _render8.getByRole;
     var input = getByRole("textbox");
-
     _userEvent["default"].type(input, "onchange event test");
-
     expect(input.value).toBe("onchange event test");
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
@@ -376,194 +306,340 @@ describe("TextInput component tests", function () {
   test("onBlur function is called correctly", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
-
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render13.getByRole;
-
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render9.getByRole;
     var input = getByRole("textbox");
-
     _react2.fireEvent.change(input, {
       target: {
         value: "Blur test"
       }
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "Blur test"
     });
   });
-  test("Clear action's tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render14, getByTitle;
-
+  test("Clear action tooltip is correct", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        value: "Text",
+        clearable: true
+      })),
+      getByTitle = _render10.getByTitle;
+    expect(getByTitle("Clear field")).toBeTruthy();
+  });
+  test("Clear action onClick cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render11, getByRole, input, closeAction;
     return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Input label",
-              value: "Text",
-              clearable: true
-            })), getByTitle = _render14.getByTitle;
-            expect(getByTitle("Clear field")).toBeTruthy();
-
-          case 2:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Input label",
+            clearable: true
+          })), getByRole = _render11.getByRole;
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "Test");
+          closeAction = getByRole("button");
+          _context.next = 6;
+          return _userEvent["default"].click(closeAction);
+        case 6:
+          expect(input.value).toBe("");
+        case 7:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
-  test("Clear action onClick cleans the input", function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      clearable: true
-    })),
-        getByRole = _render15.getByRole;
-
-    var input = getByRole("textbox");
-
-    _userEvent["default"].type(input, "Test");
-
-    var closeAction = getByRole("button");
-
-    _userEvent["default"].click(closeAction);
-
-    expect(input.value).toBe("");
-  });
-  test("Disabled input renders with correct aria and can not be modified", function () {
+  test("Disabled text input renders with correct aria and can not be modified", function () {
     var onChange = jest.fn();
-
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      onChange: onChange,
-      disabled: true
-    })),
-        getByRole = _render16.getByRole;
-
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        onChange: onChange,
+        disabled: true
+      })),
+      getByRole = _render12.getByRole;
     var input = getByRole("textbox");
-    expect(input.getAttribute("aria-disabled")).toBe("true");
-
     _userEvent["default"].type(input, "Test");
-
     expect(onChange).not.toHaveBeenCalled();
   });
-  test("Disabled input (action must be shown but not clickable)", function () {
-    var onClick = jest.fn();
-    var action = {
-      onClick: onClick,
-      icon: /*#__PURE__*/_react["default"].createElement("svg", {
-        "data-testid": "image",
-        xmlns: "http://www.w3.org/2000/svg",
-        height: "24px",
-        viewBox: "0 0 24 24",
-        width: "24px",
-        fill: "currentColor"
-      }, /*#__PURE__*/_react["default"].createElement("path", {
-        d: "M0 0h24v24H0V0z",
-        fill: "none"
-      }), /*#__PURE__*/_react["default"].createElement("path", {
-        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
-      }))
-    };
-
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Disabled input label",
-      action: action,
-      disabled: true
-    })),
-        getByRole = _render17.getByRole;
-
-    var input = getByRole("textbox");
-    expect(input.disabled).toBeTruthy();
-
-    _userEvent["default"].click(getByRole("button"));
-
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  test("Disabled input (clear default action should not be displayed, even with text written on the input)", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Disabled input label",
-      value: "Sample text",
-      disabled: true,
-      clearable: true
-    })),
-        getByRole = _render18.getByRole,
-        queryByRole = _render18.queryByRole;
-
+  test("Disabled text input (action must be shown but not clickable)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var onClick, action, _render13, getByRole, input;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          onClick = jest.fn();
+          action = {
+            onClick: onClick,
+            icon: /*#__PURE__*/_react["default"].createElement("svg", {
+              "data-testid": "image",
+              xmlns: "http://www.w3.org/2000/svg",
+              height: "24px",
+              viewBox: "0 0 24 24",
+              width: "24px",
+              fill: "currentColor"
+            }, /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M0 0h24v24H0V0z",
+              fill: "none"
+            }), /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+            }))
+          };
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Disabled input label",
+            action: action,
+            disabled: true
+          })), getByRole = _render13.getByRole;
+          input = getByRole("textbox");
+          expect(input.disabled).toBeTruthy();
+          _context2.next = 7;
+          return _userEvent["default"].click(getByRole("button"));
+        case 7:
+          expect(onClick).not.toHaveBeenCalled();
+        case 8:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Disabled text input (clear default action should not be displayed, even with text written on the input)", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Disabled input label",
+        value: "Sample text",
+        disabled: true,
+        clearable: true
+      })),
+      getByRole = _render14.getByRole,
+      queryByRole = _render14.queryByRole;
     var input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
     expect(queryByRole("button")).toBeFalsy();
   });
-  test("Disabled input (suffix and preffix must be displayed)", function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Disabled input label",
-      value: "Sample text",
-      prefix: "+34",
-      suffix: "USD",
-      disabled: true
-    })),
-        getByRole = _render19.getByRole,
-        getByText = _render19.getByText;
-
+  test("Disabled text input (suffix and prefix must be displayed)", function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Disabled input label",
+        value: "Sample text",
+        prefix: "+34",
+        suffix: "USD",
+        disabled: true
+      })),
+      getByRole = _render15.getByRole,
+      getByText = _render15.getByText;
     var input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
-  test("Action prop: image displayed with title and onClick event", function () {
-    var onClick = jest.fn();
-    var action = {
-      onClick: onClick,
-      icon: /*#__PURE__*/_react["default"].createElement("svg", {
-        "data-testid": "image",
-        xmlns: "http://www.w3.org/2000/svg",
-        height: "24px",
-        viewBox: "0 0 24 24",
-        width: "24px",
-        fill: "currentColor"
-      }, /*#__PURE__*/_react["default"].createElement("path", {
-        d: "M0 0h24v24H0V0z",
-        fill: "none"
-      }), /*#__PURE__*/_react["default"].createElement("path", {
-        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+  test("Read-only text input doesn't render the clear action", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Disabled input label",
+        defaultValue: "Sample text",
+        readOnly: true,
+        clearable: true
       })),
-      title: "Search"
-    };
-
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      action: action
-    })),
-        getByRole = _render20.getByRole,
-        getByTestId = _render20.getByTestId,
-        getByTitle = _render20.getByTitle;
-
-    expect(getByTestId("image")).toBeTruthy();
-    expect(getByTitle("Search")).toBeTruthy();
-
-    _userEvent["default"].click(getByRole("button"));
-
-    expect(onClick).toHaveBeenCalled();
+      getByRole = _render16.getByRole,
+      queryByRole = _render16.queryByRole;
+    var input = getByRole("textbox");
+    expect(input.readOnly).toBeTruthy();
+    expect(queryByRole("button")).toBeFalsy();
   });
+  test("Read-only text input does not trigger onChange function", function () {
+    var onChange = jest.fn();
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Example label",
+        onChange: onChange,
+        readOnly: true
+      })),
+      getByLabelText = _render17.getByLabelText;
+    var textInput = getByLabelText("Example label");
+    _userEvent["default"].type(textInput, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only text input sends its value on submit", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var handlerOnSubmit, _render18, getByText, submit;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              data: "Text"
+            });
+          });
+          _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Example label",
+            name: "data",
+            defaultValue: "Text",
+            readOnly: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render18.getByText;
+          submit = getByText("Submit");
+          _context3.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  test("Read-only text input doesn't trigger custom action's onClick event", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var onClick, action, _render19, getByRole;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          onClick = jest.fn();
+          action = {
+            onClick: onClick,
+            icon: /*#__PURE__*/_react["default"].createElement("svg", {
+              "data-testid": "image",
+              xmlns: "http://www.w3.org/2000/svg",
+              height: "24px",
+              viewBox: "0 0 24 24",
+              width: "24px",
+              fill: "currentColor"
+            }, /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M0 0h24v24H0V0z",
+              fill: "none"
+            }), /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+            })),
+            title: "Search"
+          };
+          _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Input label",
+            action: action,
+            readOnly: true
+          })), getByRole = _render19.getByRole;
+          _context4.next = 5;
+          return _userEvent["default"].click(getByRole("button"));
+        case 5:
+          expect(onClick).not.toHaveBeenCalled();
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  test("Action prop: image displayed with title and onClick event", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var onClick, action, _render20, getByRole, getByTestId, getByTitle;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          onClick = jest.fn();
+          action = {
+            onClick: onClick,
+            icon: /*#__PURE__*/_react["default"].createElement("svg", {
+              "data-testid": "image",
+              xmlns: "http://www.w3.org/2000/svg",
+              height: "24px",
+              viewBox: "0 0 24 24",
+              width: "24px",
+              fill: "currentColor"
+            }, /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M0 0h24v24H0V0z",
+              fill: "none"
+            }), /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+            })),
+            title: "Search"
+          };
+          _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Input label",
+            action: action
+          })), getByRole = _render20.getByRole, getByTestId = _render20.getByTestId, getByTitle = _render20.getByTitle;
+          expect(getByTestId("image")).toBeTruthy();
+          expect(getByTitle("Search")).toBeTruthy();
+          _context5.next = 7;
+          return _userEvent["default"].click(getByRole("button"));
+        case 7:
+          expect(onClick).toHaveBeenCalled();
+        case 8:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Text input submit correctly value in form", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var onClick, action, handlerOnSubmit, _render21, getByText, getAllByRole, getByRole, search, submit, input;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          onClick = jest.fn();
+          action = {
+            onClick: onClick,
+            icon: /*#__PURE__*/_react["default"].createElement("svg", {
+              "data-testid": "image",
+              xmlns: "http://www.w3.org/2000/svg",
+              height: "24px",
+              viewBox: "0 0 24 24",
+              width: "24px",
+              fill: "currentColor"
+            }, /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M0 0h24v24H0V0z",
+              fill: "none"
+            }), /*#__PURE__*/_react["default"].createElement("path", {
+              d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+            })),
+            title: "Search"
+          };
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              data: "test"
+            });
+          });
+          _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Input label",
+            name: "data",
+            action: action
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render21.getByText, getAllByRole = _render21.getAllByRole, getByRole = _render21.getByRole;
+          search = getAllByRole("button")[0];
+          submit = getByText("Submit");
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "test");
+          expect(input.value).toBe("test");
+          _context6.next = 11;
+          return _userEvent["default"].click(search);
+        case 11:
+          expect(handlerOnSubmit).not.toHaveBeenCalled();
+          _context6.next = 14;
+          return _userEvent["default"].click(submit);
+        case 14:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 15:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
   test("Renders with correct prefix and suffix", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Input label",
-      prefix: "+34",
-      suffix: "USD"
-    })),
-        getByText = _render21.getByText;
-
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Input label",
+        prefix: "+34",
+        suffix: "USD"
+      })),
+      getByText = _render22.getByText;
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
-  test("Input has correct accesibility attributes", function () {
+  test("Text Input has correct aria accessibility attributes", function () {
     var onClick = jest.fn();
     var action = {
       onClick: onClick,
@@ -582,1131 +658,1099 @@ describe("TextInput component tests", function () {
       })),
       title: "Search"
     };
-
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      clearable: true,
-      action: action
-    })),
-        getByRole = _render22.getByRole,
-        getAllByRole = _render22.getAllByRole;
-
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Example label",
+        clearable: true,
+        action: action
+      })),
+      getByRole = _render23.getByRole,
+      getAllByRole = _render23.getAllByRole;
     var input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();
     expect(input.getAttribute("aria-expanded")).toBeNull();
+    expect(input.getAttribute("aria-haspopup")).toBeNull();
     expect(input.getAttribute("aria-activedescendant")).toBeNull();
     expect(input.getAttribute("aria-invalid")).toBe("false");
     expect(input.getAttribute("aria-errormessage")).toBeNull();
     expect(input.getAttribute("aria-required")).toBe("true");
-
     _userEvent["default"].type(input, "Text");
-
     var clear = getAllByRole("button")[0];
     expect(clear.getAttribute("aria-label")).toBe("Clear field");
     var search = getAllByRole("button")[1];
     expect(search.getAttribute("aria-label")).toBe("Search");
   });
-  test("Autosuggest has correct accesibility attributes", function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Autocomplete Countries",
-      optional: true,
-      suggestions: countries
-    })),
-        getByRole = _render23.getByRole,
-        getAllByRole = _render23.getAllByRole;
-
+  test("Autosuggest has correct accessibility attributes", function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        optional: true,
+        suggestions: countries
+      })),
+      getByRole = _render24.getByRole,
+      getAllByRole = _render24.getAllByRole;
     var input = getByRole("combobox");
     expect(input.getAttribute("aria-autocomplete")).toBe("list");
     expect(input.getAttribute("aria-expanded")).toBe("false");
+    expect(input.getAttribute("aria-haspopup")).toBe("listbox");
     expect(input.getAttribute("aria-required")).toBe("false");
-
     _react2.fireEvent.focus(input);
-
     var list = getByRole("listbox");
     expect(input.getAttribute("aria-controls")).toBe(list.id);
     expect(input.getAttribute("aria-expanded")).toBe("true");
-    expect(list.getAttribute("aria-label")).toBe("Autocomplete Countries");
     var options = getAllByRole("option");
     expect(options[0].getAttribute("aria-selected")).toBeNull();
   });
+  test("Mouse wheel interaction does not affect the text value", function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Default label",
+        placeholder: "Placeholder",
+        defaultValue: "Example text"
+      })),
+      getByRole = _render25.getByRole;
+    var input = getByRole("textbox");
+    _react2.fireEvent.wheel(input, {
+      deltaY: -100
+    });
+    expect(input.value).toBe("Example text");
+    _react2.fireEvent.wheel(input, {
+      deltaY: 100
+    });
+    expect(input.value).toBe("Example text");
+  });
 });
 describe("TextInput component synchronous autosuggest tests", function () {
-  test("Autosuggest is displayed when the input gains focus", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var onChange, _render24, getByRole, getByText, input, list;
-
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            onChange = jest.fn();
-            _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render24.getByRole, getByText = _render24.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-            expect(getByText("Afghanistan")).toBeTruthy();
-            expect(getByText("Albania")).toBeTruthy();
-            expect(getByText("Algeria")).toBeTruthy();
-            expect(getByText("Andorra")).toBeTruthy();
-
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
+  test("Autosuggest is displayed when the input gains focus", function () {
+    var onChange = jest.fn();
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: countries,
+        onChange: onChange
+      })),
+      getByRole = _render26.getByRole,
+      getByText = _render26.getByText;
+    var input = getByRole("combobox");
+    _react2.fireEvent.focus(input);
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    expect(getByText("Afghanistan")).toBeTruthy();
+    expect(getByText("Albania")).toBeTruthy();
+    expect(getByText("Algeria")).toBeTruthy();
+    expect(getByText("Andorra")).toBeTruthy();
+  });
+  test("Autosuggest is displayed when the user clicks the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var onChange, _render27, getByRole, getByText, input, list;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          onChange = jest.fn();
+          _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render27.getByRole, getByText = _render27.getByText;
+          input = getByRole("combobox");
+          _context7.next = 5;
+          return _userEvent["default"].click(input);
+        case 5:
+          list = getByRole("listbox");
+          expect(list).toBeTruthy();
+          expect(getByText("Afghanistan")).toBeTruthy();
+          expect(getByText("Albania")).toBeTruthy();
+          expect(getByText("Algeria")).toBeTruthy();
+          expect(getByText("Andorra")).toBeTruthy();
+        case 11:
+        case "end":
+          return _context7.stop();
       }
-    }, _callee2);
+    }, _callee7);
   })));
-  test("Autosuggest is displayed when the user clicks the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var onChange, _render25, getByRole, getByText, input, list;
-
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            onChange = jest.fn();
-            _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render25.getByRole, getByText = _render25.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-            expect(getByText("Afghanistan")).toBeTruthy();
-            expect(getByText("Albania")).toBeTruthy();
-            expect(getByText("Algeria")).toBeTruthy();
-            expect(getByText("Andorra")).toBeTruthy();
-
-          case 10:
-          case "end":
-            return _context3.stop();
-        }
+  test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render28, getByRole, getByText, getAllByText, input;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries
+          })), getByRole = _render28.getByRole, getByText = _render28.getByText, getAllByText = _render28.getAllByText;
+          input = getByRole("combobox");
+          _context8.next = 4;
+          return _userEvent["default"].type(input, "Bah");
+        case 4:
+          expect(getByRole("listbox")).toBeTruthy();
+          expect(getAllByText("Bah").length).toBe(2);
+          expect(getByText("amas")).toBeTruthy();
+          expect(getByText("rain")).toBeTruthy();
+        case 8:
+        case "end":
+          return _context8.stop();
       }
-    }, _callee3);
+    }, _callee8);
   })));
-  test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var onChange, _render26, getByRole, queryByRole, getByText, getAllByText, input, list;
-
-    return _regenerator["default"].wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            onChange = jest.fn();
-            _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render26.getByRole, queryByRole = _render26.queryByRole, getByText = _render26.getByText, getAllByText = _render26.getAllByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Esc",
-              code: "Esc",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _userEvent["default"].type(input, "B");
-
-            expect(list).toBeTruthy();
-            expect(getAllByText("B").length).toBe(4);
-            expect(getByText("ahamas")).toBeTruthy();
-            expect(getByText("ahrain")).toBeTruthy();
-            expect(getByText("angladesh")).toBeTruthy();
-            expect(getByText("arbados")).toBeTruthy();
-
-          case 15:
-          case "end":
-            return _context4.stop();
-        }
+  test("Read-only text input does not open the suggestions list", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var onChange, _render29, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          onChange = jest.fn();
+          _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange,
+            readOnly: true
+          })), getByRole = _render29.getByRole, queryByRole = _render29.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          expect(queryByRole("listbox")).toBeFalsy();
+          _context9.next = 7;
+          return _userEvent["default"].click(input);
+        case 7:
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 8:
+        case "end":
+          return _context9.stop();
       }
-    }, _callee4);
+    }, _callee9);
   })));
   test("Autosuggest displays filtered when the input has a default value", function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Uncontrolled suggestions filtered by default",
-      helperText: "Example of helper text",
-      placeholder: "Placeholder",
-      margin: "medium",
-      defaultValue: "Suggestion 2",
-      suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
-      clearable: true
-    })),
-        getByRole = _render27.getByRole,
-        getByText = _render27.getByText,
-        getAllByText = _render27.getAllByText;
-
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Uncontrolled suggestions filtered by default",
+        helperText: "Example of helper text",
+        placeholder: "Placeholder",
+        margin: "medium",
+        defaultValue: "Suggestion 2",
+        suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
+        clearable: true
+      })),
+      getByRole = _render30.getByRole,
+      getByText = _render30.getByText,
+      getAllByText = _render30.getAllByText;
     var input = getByRole("combobox");
     expect(input.value).toBe("Suggestion 2");
-
     _react2.fireEvent.focus(input);
-
     expect(getAllByText("Suggestion 2").length).toBe(2);
     expect(getByText("3")).toBeTruthy();
     expect(getByText("4")).toBeTruthy();
   });
-  test("Autosuggest is not displayed when prop suggestions is an empty array", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var onChange, _render28, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            onChange = jest.fn();
-            _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: [],
-              onChange: onChange
-            })), queryByRole = _render28.queryByRole;
-            input = queryByRole("textbox");
-
-            _react2.fireEvent.focus(input);
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 5:
-          case "end":
-            return _context5.stop();
-        }
+  test("Autosuggest is not displayed when prop suggestions is an empty array", function () {
+    var onChange = jest.fn();
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: [],
+        onChange: onChange
+      })),
+      queryByRole = _render31.queryByRole;
+    var input = queryByRole("textbox");
+    _react2.fireEvent.focus(input);
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest closes the listbox when there are no matches for the user's input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var onChange, _render32, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          onChange = jest.fn();
+          _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render32.getByRole, queryByRole = _render32.queryByRole;
+          input = getByRole("combobox");
+          _context11.next = 5;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+            return _regenerator["default"].wrap(function _callee10$(_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
+                case 0:
+                  _userEvent["default"].type(input, "x");
+                case 1:
+                case "end":
+                  return _context10.stop();
+              }
+            }, _callee10);
+          })));
+        case 5:
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 6:
+        case "end":
+          return _context11.stop();
       }
-    }, _callee5);
+    }, _callee11);
   })));
-  test("Autosuggest closes the listbox when there are no matches for the user's input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var onChange, _render29, getByRole, queryByRole, getByText, input, list;
-
-    return _regenerator["default"].wrap(function _callee6$(_context6) {
-      while (1) {
-        switch (_context6.prev = _context6.next) {
-          case 0:
-            onChange = jest.fn();
-            _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render29.getByRole, queryByRole = _render29.queryByRole, getByText = _render29.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-            expect(getByText("Afghanistan")).toBeTruthy();
-
-            _userEvent["default"].type(input, "x");
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 9:
-          case "end":
-            return _context6.stop();
-        }
+  test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+    var onChange, _render33, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee13$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          onChange = jest.fn();
+          _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render33.getByRole, queryByRole = _render33.queryByRole;
+          input = getByRole("combobox");
+          _context13.next = 5;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+            return _regenerator["default"].wrap(function _callee12$(_context12) {
+              while (1) switch (_context12.prev = _context12.next) {
+                case 0:
+                  _userEvent["default"].type(input, "x");
+                case 1:
+                case "end":
+                  return _context12.stop();
+              }
+            }, _callee12);
+          })));
+        case 5:
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.focus(input);
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 12:
+        case "end":
+          return _context13.stop();
       }
-    }, _callee6);
+    }, _callee13);
   })));
-  test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var onChange, _render30, getByRole, queryByRole, getByText, input, list;
-
-    return _regenerator["default"].wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            onChange = jest.fn();
-            _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render30.getByRole, queryByRole = _render30.queryByRole, getByText = _render30.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-            expect(getByText("Afghanistan")).toBeTruthy();
-
-            _userEvent["default"].type(input, "x");
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.focus(input);
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUp",
-              keyCode: 38,
-              charCode: 38
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowDown",
-              code: "ArrowDown",
-              keyCode: 40,
-              charCode: 40
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 15:
-          case "end":
-            return _context7.stop();
-        }
+  test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var onChange, _render34, getByRole, getByText, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          onChange = jest.fn();
+          _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render34.getByRole, getByText = _render34.getByText, queryByRole = _render34.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context16.next = 6;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+            return _regenerator["default"].wrap(function _callee14$(_context14) {
+              while (1) switch (_context14.prev = _context14.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Alba");
+                case 1:
+                case "end":
+                  return _context14.stop();
+              }
+            }, _callee14);
+          })));
+        case 6:
+          expect(onChange).toHaveBeenCalled();
+          expect(getByText("Alba")).toBeTruthy();
+          expect(getByText("nia")).toBeTruthy();
+          _context16.next = 11;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+            return _regenerator["default"].wrap(function _callee15$(_context15) {
+              while (1) switch (_context15.prev = _context15.next) {
+                case 0:
+                  _userEvent["default"].click(getByRole("option"));
+                case 1:
+                case "end":
+                  return _context15.stop();
+              }
+            }, _callee15);
+          })));
+        case 11:
+          expect(input.value).toBe("Albania");
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 13:
+        case "end":
+          return _context16.stop();
       }
-    }, _callee7);
+    }, _callee16);
   })));
-  test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-    var onChange, _render31, getByRole, getByText, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee8$(_context8) {
-      while (1) {
-        switch (_context8.prev = _context8.next) {
-          case 0:
-            onChange = jest.fn();
-            _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render31.getByRole, getByText = _render31.getByText, queryByRole = _render31.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Alba");
-
-            expect(onChange).toHaveBeenCalled();
-            expect(getByText("Alba")).toBeTruthy();
-            expect(getByText("nia")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(input.value).toBe("Albania");
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 11:
-          case "end":
-            return _context8.stop();
-        }
+  test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
+    var onChange, _render35, getByRole, getByText, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          onChange = jest.fn();
+          _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            value: "Andor",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render35.getByRole, getByText = _render35.getByText, queryByRole = _render35.queryByRole;
+          input = getByRole("combobox");
+          _context17.next = 5;
+          return _userEvent["default"].click(getByText("Autocomplete Countries"));
+        case 5:
+          expect(input.value).toBe("Andor");
+          expect(getByText("Andor")).toBeTruthy();
+          expect(getByText("ra")).toBeTruthy();
+          _context17.next = 10;
+          return _userEvent["default"].click(getByRole("option"));
+        case 10:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "Andorra"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 12:
+        case "end":
+          return _context17.stop();
       }
-    }, _callee8);
+    }, _callee17);
   })));
-  test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
-    var onChange, _render32, getByRole, getByText, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee9$(_context9) {
-      while (1) {
-        switch (_context9.prev = _context9.next) {
-          case 0:
-            onChange = jest.fn();
-            _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              value: "Andor",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render32.getByRole, getByText = _render32.getByText, queryByRole = _render32.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            expect(input.value).toBe("Andor");
-            expect(getByText("Andor")).toBeTruthy();
-            expect(getByText("ra")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(onChange).toHaveBeenCalledWith({
-              value: "Andorra"
-            });
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 10:
-          case "end":
-            return _context9.stop();
-        }
+  test("Autosuggest - Pattern constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee20() {
+    var onChange, onBlur, _render36, getByRole, getByText, input;
+    return _regenerator["default"].wrap(function _callee20$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange,
+            onBlur: onBlur,
+            pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+          })), getByRole = _render36.getByRole, getByText = _render36.getByText;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context20.next = 7;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
+            return _regenerator["default"].wrap(function _callee18$(_context18) {
+              while (1) switch (_context18.prev = _context18.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Andor");
+                case 1:
+                case "end":
+                  return _context18.stop();
+              }
+            }, _callee18);
+          })));
+        case 7:
+          expect(getByText("Andor")).toBeTruthy();
+          expect(getByText("ra")).toBeTruthy();
+          _context20.next = 11;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
+            return _regenerator["default"].wrap(function _callee19$(_context19) {
+              while (1) switch (_context19.prev = _context19.next) {
+                case 0:
+                  _userEvent["default"].click(getByRole("option"));
+                case 1:
+                case "end":
+                  return _context19.stop();
+              }
+            }, _callee19);
+          })));
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "Andorra",
+            error: "Please match the format requested."
+          });
+          _react2.fireEvent.blur(input);
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "Andorra",
+            error: "Please match the format requested."
+          });
+        case 14:
+        case "end":
+          return _context20.stop();
       }
-    }, _callee9);
+    }, _callee20);
   })));
-  test("Autosuggest - Pattern constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
-    var onChange, onBlur, _render33, getByRole, getByText, input;
-
-    return _regenerator["default"].wrap(function _callee10$(_context10) {
-      while (1) {
-        switch (_context10.prev = _context10.next) {
-          case 0:
-            onChange = jest.fn();
-            onBlur = jest.fn();
-            _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange,
-              onBlur: onBlur,
-              pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
-            })), getByRole = _render33.getByRole, getByText = _render33.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Andor");
-
-            expect(getByText("Andor")).toBeTruthy();
-            expect(getByText("ra")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(onChange).toHaveBeenCalledWith({
-              value: "Andorra",
-              error: "Please match the format requested."
-            });
-
-            _react2.fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalledWith({
-              value: "Andorra",
-              error: "Please match the format requested."
-            });
-
-          case 12:
-          case "end":
-            return _context10.stop();
-        }
+  test("Autosuggest - Length constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
+    var onChange, onBlur, _render37, getByText, getByRole, input;
+    return _regenerator["default"].wrap(function _callee23$(_context23) {
+      while (1) switch (_context23.prev = _context23.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange,
+            onBlur: onBlur,
+            minLength: 5,
+            maxLength: 10
+          })), getByText = _render37.getByText, getByRole = _render37.getByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context23.next = 7;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
+            return _regenerator["default"].wrap(function _callee21$(_context21) {
+              while (1) switch (_context21.prev = _context21.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Cha");
+                case 1:
+                case "end":
+                  return _context21.stop();
+              }
+            }, _callee21);
+          })));
+        case 7:
+          expect(getByText("Cha")).toBeTruthy();
+          expect(getByText("d")).toBeTruthy();
+          _context23.next = 11;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
+            return _regenerator["default"].wrap(function _callee22$(_context22) {
+              while (1) switch (_context22.prev = _context22.next) {
+                case 0:
+                  _userEvent["default"].click(getByRole("option"));
+                case 1:
+                case "end":
+                  return _context22.stop();
+              }
+            }, _callee22);
+          })));
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "Cha",
+            error: "Min length 5, max length 10."
+          });
+          _react2.fireEvent.blur(input);
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "Chad",
+            error: "Min length 5, max length 10."
+          });
+        case 14:
+        case "end":
+          return _context23.stop();
       }
-    }, _callee10);
+    }, _callee23);
   })));
-  test("Autosuggest - Length constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
-    var onChange, onBlur, _render34, getByText, getByRole, input;
-
-    return _regenerator["default"].wrap(function _callee11$(_context11) {
-      while (1) {
-        switch (_context11.prev = _context11.next) {
-          case 0:
-            onChange = jest.fn();
-            onBlur = jest.fn();
-            _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange,
-              onBlur: onBlur,
-              minLength: 5,
-              maxLength: 10
-            })), getByText = _render34.getByText, getByRole = _render34.getByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Cha");
-
-            expect(getByText("Cha")).toBeTruthy();
-            expect(getByText("d")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(onChange).toHaveBeenCalledWith({
-              value: "Cha",
-              error: "Min length 5, max length 10."
-            });
-
-            _react2.fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalledWith({
-              value: "Chad",
-              error: "Min length 5, max length 10."
-            });
-
-          case 12:
-          case "end":
-            return _context11.stop();
-        }
+  test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", function () {
+    var onChange = jest.fn();
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: countries,
+        onChange: onChange
+      })),
+      getByRole = _render38.getByRole,
+      queryByRole = _render38.queryByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+    expect(input.value).toBe("Afghanistan");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", function () {
+    var onChange = jest.fn();
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: countries,
+        onChange: onChange
+      })),
+      getByRole = _render39.getByRole,
+      queryByRole = _render39.queryByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+    expect(input.value).toBe("Djibouti");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", function () {
+    var onChange = jest.fn();
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: countries,
+        onChange: onChange
+      })),
+      getByRole = _render40.getByRole,
+      queryByRole = _render40.queryByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.focus(input);
+    _userEvent["default"].type(input, "Bangla");
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+    expect(input.value).toBe("");
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", function () {
+    var onChange = jest.fn();
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: countries,
+        onChange: onChange
+      })),
+      getByRole = _render41.getByRole,
+      queryByRole = _render41.queryByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.focus(input);
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 27,
+      charCode: 27
+    });
+    expect(input.value).toBe("");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest complex key sequence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee25() {
+    var onChange, _render42, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee25$(_context25) {
+      while (1) switch (_context25.prev = _context25.next) {
+        case 0:
+          onChange = jest.fn();
+          _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autocomplete Countries",
+            suggestions: countries,
+            onChange: onChange
+          })), getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context25.next = 6;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
+            return _regenerator["default"].wrap(function _callee24$(_context24) {
+              while (1) switch (_context24.prev = _context24.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Ba");
+                case 1:
+                case "end":
+                  return _context24.stop();
+              }
+            }, _callee24);
+          })));
+        case 6:
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowUp",
+            code: "ArrowUpp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(input, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(input.value).toBe("Barbados");
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(input, {
+            key: "Esc",
+            code: "Esp",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(input.value).toBe("");
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 15:
+        case "end":
+          return _context25.stop();
       }
-    }, _callee11);
+    }, _callee25);
   })));
-  test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
-    var onChange, _render35, getByRole, queryByRole, input, list;
-
-    return _regenerator["default"].wrap(function _callee12$(_context12) {
-      while (1) {
-        switch (_context12.prev = _context12.next) {
-          case 0:
-            onChange = jest.fn();
-            _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowDown",
-              code: "ArrowDown",
-              keyCode: 40,
-              charCode: 40
-            });
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Enter",
-              code: "Enter",
-              keyCode: 13,
-              charCode: 13
-            });
-
-            expect(input.value).toBe("Afghanistan");
-            expect(queryByRole("list")).toBeFalsy();
-
-          case 9:
-          case "end":
-            return _context12.stop();
-        }
+  test("Autosuggest escapes special characters", function () {
+    var onChange = jest.fn();
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autocomplete Countries",
+        suggestions: specialCharacters,
+        onChange: onChange
+      })),
+      getAllByText = _render43.getAllByText,
+      getByRole = _render43.getByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.focus(input);
+    var list = getByRole("listbox");
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "/"
       }
-    }, _callee12);
-  })));
-  test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
-    var onChange, _render36, getByRole, queryByRole, input, list;
-
-    return _regenerator["default"].wrap(function _callee13$(_context13) {
-      while (1) {
-        switch (_context13.prev = _context13.next) {
-          case 0:
-            onChange = jest.fn();
-            _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render36.getByRole, queryByRole = _render36.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUp",
-              keyCode: 38,
-              charCode: 38
-            });
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Enter",
-              code: "Enter",
-              keyCode: 13,
-              charCode: 13
-            });
-
-            expect(input.value).toBe("Djibouti");
-            expect(queryByRole("list")).toBeFalsy();
-
-          case 9:
-          case "end":
-            return _context13.stop();
-        }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "\\"
       }
-    }, _callee13);
-  })));
-  test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
-    var onChange, _render37, getByRole, queryByRole, input, list;
-
-    return _regenerator["default"].wrap(function _callee14$(_context14) {
-      while (1) {
-        switch (_context14.prev = _context14.next) {
-          case 0:
-            onChange = jest.fn();
-            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render37.getByRole, queryByRole = _render37.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Bangla");
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Esc",
-              code: "Esc",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(input.value).toBe("");
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 10:
-          case "end":
-            return _context14.stop();
-        }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "*"
       }
-    }, _callee14);
-  })));
-  test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
-    var onChange, _render38, getByRole, queryByRole, input, list;
-
-    return _regenerator["default"].wrap(function _callee15$(_context15) {
-      while (1) {
-        switch (_context15.prev = _context15.next) {
-          case 0:
-            onChange = jest.fn();
-            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render38.getByRole, queryByRole = _render38.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Enter",
-              code: "Enter",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(input.value).toBe("");
-            expect(queryByRole("list")).toBeFalsy();
-
-          case 9:
-          case "end":
-            return _context15.stop();
-        }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "("
       }
-    }, _callee15);
-  })));
-  test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
-    var onChange, _render39, getByRole, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee16$(_context16) {
-      while (1) {
-        switch (_context16.prev = _context16.next) {
-          case 0:
-            onChange = jest.fn();
-            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autocomplete Countries",
-              suggestions: countries,
-              onChange: onChange
-            })), getByRole = _render39.getByRole, queryByRole = _render39.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Ba");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUp",
-              keyCode: 38,
-              charCode: 38
-            });
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUpp",
-              keyCode: 38,
-              charCode: 38
-            });
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowDown",
-              code: "ArrowDown",
-              keyCode: 40,
-              charCode: 40
-            });
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Enter",
-              code: "Enter",
-              keyCode: 13,
-              charCode: 13
-            });
-
-            expect(input.value).toBe("Barbados");
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Esc",
-              code: "Esp",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(input.value).toBe("");
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 14:
-          case "end":
-            return _context16.stop();
-        }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: ")"
       }
-    }, _callee16);
-  })));
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "["
+      }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "]"
+      }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "+"
+      }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "?"
+      }
+    });
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
 });
 describe("TextInput component asynchronous autosuggest tests", function () {
-  test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
-    var callbackFunc, onChange, _render40, getByRole, getByText, input;
-
-    return _regenerator["default"].wrap(function _callee17$(_context17) {
-      while (1) {
-        switch (_context17.prev = _context17.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              suggestions: callbackFunc,
-              onChange: onChange
-            })), getByRole = _render40.getByRole, getByText = _render40.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            expect(getByRole("listbox")).toBeTruthy();
-            _context17.next = 8;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
-            });
-
-          case 8:
-            expect(getByText("Afghanistan")).toBeTruthy();
-            expect(getByText("Albania")).toBeTruthy();
-            expect(getByText("Algeria")).toBeTruthy();
-            expect(getByText("Andorra")).toBeTruthy();
-
-            _userEvent["default"].type(input, "Ab");
-
-            _context17.next = 15;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
-            });
-
-          case 15:
-            expect(getByText("Cabo Verde")).toBeTruthy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUp",
-              keyCode: 38,
-              charCode: 38
+  test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee27() {
+    var callbackFunc, onChange, _render44, getByRole, getByText, input;
+    return _regenerator["default"].wrap(function _callee27$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Enter",
-              code: "Enter",
-              keyCode: 13,
-              charCode: 13
-            });
-
-            expect(input.value).toBe("Cabo Verde");
-
-          case 19:
-          case "end":
-            return _context17.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            suggestions: callbackFunc,
+            onChange: onChange
+          })), getByRole = _render44.getByRole, getByText = _render44.getByText;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          expect(getByRole("listbox")).toBeTruthy();
+          _context27.next = 8;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 8:
+          expect(getByText("Afghanistan")).toBeTruthy();
+          expect(getByText("Albania")).toBeTruthy();
+          expect(getByText("Algeria")).toBeTruthy();
+          expect(getByText("Andorra")).toBeTruthy();
+          _context27.next = 14;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee26() {
+            return _regenerator["default"].wrap(function _callee26$(_context26) {
+              while (1) switch (_context26.prev = _context26.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Ab");
+                case 1:
+                case "end":
+                  return _context26.stop();
+              }
+            }, _callee26);
+          })));
+        case 14:
+          _context27.next = 16;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 16:
+          expect(getByText("Cabo Verde")).toBeTruthy();
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(input, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(input.value).toBe("Cabo Verde");
+        case 20:
+        case "end":
+          return _context27.stop();
       }
-    }, _callee17);
+    }, _callee27);
   })));
-  test("Autosuggest Esc key works while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
-    var callbackFunc, onChange, _render41, getByRole, queryByText, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee18$(_context18) {
-      while (1) {
-        switch (_context18.prev = _context18.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              suggestions: callbackFunc,
-              onChange: onChange
-            })), getByRole = _render41.getByRole, queryByText = _render41.queryByText, queryByRole = _render41.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            expect(getByRole("listbox")).toBeTruthy();
-
-            _userEvent["default"].type(input, "Ab");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Esc",
-              code: "Esc",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-            expect(queryByText("Searching...")).toBeFalsy();
-            expect(input.value).toBe("");
-
-          case 11:
-          case "end":
-            return _context18.stop();
-        }
-      }
-    }, _callee18);
-  })));
-  test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
-    var callbackFunc, onChange, _render42, getByRole, getByText, queryByText, queryByRole, input, list;
-
-    return _regenerator["default"].wrap(function _callee19$(_context19) {
-      while (1) {
-        switch (_context19.prev = _context19.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              suggestions: callbackFunc,
-              onChange: onChange
-            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByText = _render42.queryByText, queryByRole = _render42.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            list = getByRole("listbox");
-            expect(list).toBeTruthy();
-
-            _userEvent["default"].type(input, "Ab");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "Esc",
-              code: "Esc",
-              keyCode: 27,
-              charCode: 27
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-            expect(queryByText("Searching...")).toBeFalsy();
-            expect(input.value).toBe("");
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowDown",
-              code: "ArrowDown",
-              keyCode: 40,
-              charCode: 40
-            });
-
-            expect(list).toBeTruthy();
-            _context19.next = 16;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
+  test("Autosuggest Esc key works while 'Searching...' message is shown", function () {
+    var callbackFunc = jest.fn(function (newValue) {
+      var result = new Promise(function (resolve) {
+        return setTimeout(function () {
+          resolve(newValue ? countries.filter(function (option) {
+            return option.toUpperCase().includes(newValue.toUpperCase());
+          }) : countries);
+        }, 100);
+      });
+      return result;
+    });
+    var onChange = jest.fn();
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+        label: "Autosuggest Countries",
+        suggestions: callbackFunc,
+        onChange: onChange
+      })),
+      getByRole = _render45.getByRole,
+      queryByText = _render45.queryByText,
+      queryByRole = _render45.queryByRole;
+    var input = getByRole("combobox");
+    _react2.fireEvent.focus(input);
+    expect(getByRole("listbox")).toBeTruthy();
+    _userEvent["default"].type(input, "Ab");
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(queryByText("Searching...")).toBeFalsy();
+    expect(input.value).toBe("");
+  });
+  test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee28() {
+    var callbackFunc, onChange, _render46, getByRole, getByText, queryByText, queryByRole, input, list;
+    return _regenerator["default"].wrap(function _callee28$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-          case 16:
-            expect(getByText("Afghanistan")).toBeTruthy();
-            expect(getByText("Albania")).toBeTruthy();
-            expect(getByText("Algeria")).toBeTruthy();
-            expect(getByText("Andorra")).toBeTruthy();
-
-          case 20:
-          case "end":
-            return _context19.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            suggestions: callbackFunc,
+            onChange: onChange
+          })), getByRole = _render46.getByRole, getByText = _render46.getByText, queryByText = _render46.queryByText, queryByRole = _render46.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          list = getByRole("listbox");
+          expect(list).toBeTruthy();
+          _userEvent["default"].type(input, "Ab");
+          _react2.fireEvent.keyDown(input, {
+            key: "Esc",
+            code: "Esc",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByText("Searching...")).toBeFalsy();
+          expect(input.value).toBe("");
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(list).toBeTruthy();
+          _context28.next = 16;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 16:
+          expect(getByText("Afghanistan")).toBeTruthy();
+          expect(getByText("Albania")).toBeTruthy();
+          expect(getByText("Algeria")).toBeTruthy();
+          expect(getByText("Andorra")).toBeTruthy();
+        case 20:
+        case "end":
+          return _context28.stop();
       }
-    }, _callee19);
+    }, _callee28);
   })));
-  test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee20() {
-    var callbackFunc, onChange, _render43, getByRole, getByText, input;
-
-    return _regenerator["default"].wrap(function _callee20$(_context20) {
-      while (1) {
-        switch (_context20.prev = _context20.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              onChange: onChange,
-              suggestions: callbackFunc
-            })), getByRole = _render43.getByRole, getByText = _render43.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Den");
-
-            _context20.next = 8;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
+  test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee29() {
+    var callbackFunc, onChange, _render47, getByRole, getByText, input;
+    return _regenerator["default"].wrap(function _callee29$(_context29) {
+      while (1) switch (_context29.prev = _context29.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-          case 8:
-            expect(getByText("Denmark")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark"
-            });
-            expect(input.value).toBe("Denmark");
-
-          case 12:
-          case "end":
-            return _context20.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            onChange: onChange,
+            suggestions: callbackFunc
+          })), getByRole = _render47.getByRole, getByText = _render47.getByText;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _userEvent["default"].type(input, "Den");
+          _context29.next = 8;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 8:
+          expect(getByText("Denmark")).toBeTruthy();
+          _context29.next = 11;
+          return _userEvent["default"].click(getByRole("option"));
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "Denmark"
+          });
+          expect(input.value).toBe("Denmark");
+        case 13:
+        case "end":
+          return _context29.stop();
       }
-    }, _callee20);
+    }, _callee29);
   })));
-  test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
-    var callbackFunc, onChange, _render44, getByRole, getByText, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee21$(_context21) {
-      while (1) {
-        switch (_context21.prev = _context21.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              value: "Denm",
-              onChange: onChange,
-              suggestions: callbackFunc
-            })), getByRole = _render44.getByRole, getByText = _render44.getByText, queryByRole = _render44.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _context21.next = 7;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
+  test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee30() {
+    var callbackFunc, onChange, _render48, getByRole, getByText, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee30$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-          case 7:
-            expect(input.value).toBe("Denm");
-            expect(getByText("Denmark")).toBeTruthy();
-
-            _userEvent["default"].click(getByRole("option"));
-
-            expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark"
-            });
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 12:
-          case "end":
-            return _context21.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            value: "Denm",
+            onChange: onChange,
+            suggestions: callbackFunc
+          })), getByRole = _render48.getByRole, getByText = _render48.getByText, queryByRole = _render48.queryByRole;
+          input = getByRole("combobox");
+          expect(input.value).toBe("Denm");
+          _context30.next = 7;
+          return _userEvent["default"].click(getByText("Autosuggest Countries"));
+        case 7:
+          _context30.next = 9;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 9:
+          expect(getByText("Denmark")).toBeTruthy();
+          _react2.fireEvent.focus(getByRole("option"));
+          _context30.next = 13;
+          return _userEvent["default"].click(getByText("Denmark"));
+        case 13:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "Denmark"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 15:
+        case "end":
+          return _context30.stop();
       }
-    }, _callee21);
+    }, _callee30);
   })));
-  test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
-    var callbackFunc, onChange, _render45, getByText, getByRole, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee22$(_context22) {
-      while (1) {
-        switch (_context22.prev = _context22.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              onChange: onChange,
-              suggestions: callbackFunc
-            })), getByText = _render45.getByText, getByRole = _render45.getByRole, queryByRole = _render45.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "Example text");
-
-            _context22.next = 8;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
+  test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee32() {
+    var callbackFunc, onChange, _render49, getByText, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee32$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-          case 8:
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 9:
-          case "end":
-            return _context22.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            onChange: onChange,
+            suggestions: callbackFunc
+          })), getByText = _render49.getByText, getByRole = _render49.getByRole, queryByRole = _render49.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context32.next = 7;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee31() {
+            return _regenerator["default"].wrap(function _callee31$(_context31) {
+              while (1) switch (_context31.prev = _context31.next) {
+                case 0:
+                  _userEvent["default"].type(input, "Example text");
+                case 1:
+                case "end":
+                  return _context31.stop();
+              }
+            }, _callee31);
+          })));
+        case 7:
+          _context32.next = 9;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 9:
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 10:
+        case "end":
+          return _context32.stop();
       }
-    }, _callee22);
+    }, _callee32);
   })));
-  test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
-    var callbackFunc, onChange, _render46, getByText, getByRole, queryByRole, input;
-
-    return _regenerator["default"].wrap(function _callee23$(_context23) {
-      while (1) {
-        switch (_context23.prev = _context23.next) {
-          case 0:
-            callbackFunc = jest.fn(function (newValue) {
-              var result = new Promise(function (resolve) {
-                return setTimeout(function () {
-                  resolve(newValue ? countries.filter(function (option) {
-                    return option.toUpperCase().includes(newValue.toUpperCase());
-                  }) : countries);
-                }, 100);
-              });
-              return result;
-            });
-            onChange = jest.fn();
-            _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              onChange: onChange,
-              suggestions: callbackFunc
-            })), getByText = _render46.getByText, getByRole = _render46.getByRole, queryByRole = _render46.queryByRole;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _userEvent["default"].type(input, "wrong");
-
-            _context23.next = 8;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
-            });
-
-          case 8:
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.focus(input);
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowUp",
-              code: "ArrowUp",
-              keyCode: 38,
-              charCode: 38
-            });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-            _react2.fireEvent.keyDown(input, {
-              key: "ArrowDown",
-              code: "ArrowDown",
-              keyCode: 40,
-              charCode: 40
+  test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee33() {
+    var callbackFunc, onChange, _render50, getByText, getByRole, queryByRole, input;
+    return _regenerator["default"].wrap(function _callee33$(_context33) {
+      while (1) switch (_context33.prev = _context33.next) {
+        case 0:
+          callbackFunc = jest.fn(function (newValue) {
+            var result = new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve(newValue ? countries.filter(function (option) {
+                  return option.toUpperCase().includes(newValue.toUpperCase());
+                }) : countries);
+              }, 100);
             });
-
-            expect(queryByRole("listbox")).toBeFalsy();
-
-          case 15:
-          case "end":
-            return _context23.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            onChange: onChange,
+            suggestions: callbackFunc
+          })), getByText = _render50.getByText, getByRole = _render50.getByRole, queryByRole = _render50.queryByRole;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _userEvent["default"].type(input, "wrong");
+          _context33.next = 8;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 8:
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.focus(input);
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(input, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 15:
+        case "end":
+          return _context33.stop();
       }
-    }, _callee23);
+    }, _callee33);
   })));
-  test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
-    var errorCallbackFunc, onChange, _render47, getByRole, getByText, input;
-
-    return _regenerator["default"].wrap(function _callee24$(_context24) {
-      while (1) {
-        switch (_context24.prev = _context24.next) {
-          case 0:
-            errorCallbackFunc = jest.fn(function () {
-              var result = new Promise(function (resolve, reject) {
-                return setTimeout(function () {
-                  reject("err");
-                }, 100);
-              });
-              return result;
+  test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee34() {
+    var errorCallbackFunc, onChange, _render51, getByRole, getByText, input;
+    return _regenerator["default"].wrap(function _callee34$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
+        case 0:
+          errorCallbackFunc = jest.fn(function () {
+            var result = new Promise(function (resolve, reject) {
+              return setTimeout(function () {
+                reject("err");
+              }, 100);
             });
-            onChange = jest.fn();
-            _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-              label: "Autosuggest Countries",
-              onChange: onChange,
-              suggestions: errorCallbackFunc
-            })), getByRole = _render47.getByRole, getByText = _render47.getByText;
-            input = getByRole("combobox");
-
-            _react2.fireEvent.focus(input);
-
-            _context24.next = 7;
-            return (0, _react2.waitForElementToBeRemoved)(function () {
-              return getByText("Searching...");
-            });
-
-          case 7:
-            expect(getByText("Error fetching data")).toBeTruthy();
-
-          case 8:
-          case "end":
-            return _context24.stop();
-        }
+            return result;
+          });
+          onChange = jest.fn();
+          _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Autosuggest Countries",
+            onChange: onChange,
+            suggestions: errorCallbackFunc
+          })), getByRole = _render51.getByRole, getByText = _render51.getByText;
+          input = getByRole("combobox");
+          _react2.fireEvent.focus(input);
+          _context34.next = 7;
+          return (0, _react2.waitForElementToBeRemoved)(function () {
+            return getByText("Searching...");
+          });
+        case 7:
+          expect(getByText("Error fetching data")).toBeTruthy();
+        case 8:
+        case "end":
+          return _context34.stop();
       }
-    }, _callee24);
+    }, _callee34);
   })));
 });