diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
index e0e29de88..e56bfaa51 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
@@ -4,4 +4,21 @@
vertical-align: middle;
display: inline-block;
width: 100%;
-}
\ No newline at end of file
+
+ textarea {
+ width: 100%;
+ line-height: 1;
+ font-size: 14px;
+ padding: 6px 12px;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-radius: 2px 0 0 2px;
+ min-height: 25px;
+ resize: vertical;
+
+ &:focus {
+ border-color: #66afe9;
+ }
+ }
+}
+
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx
new file mode 100644
index 000000000..caa3821bc
--- /dev/null
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
+import "../../../../externals/jquery.typeahead.min.js";
+
+describe("inputTypeahead", () => {
+ it("renders ", () => {
+ const props: InputTypeaheadComponentProps = {
+ choices: [
+ { caption: "item1", value: "value1" },
+ { caption: "item2", value: "value2" }
+ ],
+ placeholder: "placeholder",
+ useTextarea: false
+ };
+
+ const wrapper = shallow();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it("renders ", () => {
+ const props: InputTypeaheadComponentProps = {
+ choices: [
+ { caption: "item1", value: "value1" },
+ { caption: "item2", value: "value2" }
+ ],
+ placeholder: "placeholder",
+ useTextarea: true
+ };
+
+ const wrapper = shallow();
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
index d603c4b61..6fa224ba1 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -7,6 +7,7 @@
*
*/
import * as React from "react";
+import "./InputTypeahead.less";
import { KeyCodes } from "../../../Common/Constants";
export interface Item {
@@ -17,7 +18,7 @@ export interface Item {
/**
* Parameters for this component
*/
-interface InputTypeaheadComponentProps {
+export interface InputTypeaheadComponentProps {
/**
* List of choices available in the dropdown.
*/
@@ -66,6 +67,11 @@ interface InputTypeaheadComponentProps {
* true: show (X) button that clears the text inside the textbox when typing
*/
showCancelButton?: boolean;
+
+ /**
+ * true: use instead of
+ */
+ useTextarea?: boolean;
}
interface OnClickItem {
@@ -135,14 +141,25 @@ export class InputTypeaheadComponent extends React.Component<
(this.containerElt = input)}>
diff --git a/src/Main.ts b/src/Main.ts
index ab1de811d..571a6e8cf 100644
--- a/src/Main.ts
+++ b/src/Main.ts
@@ -6,7 +6,6 @@ import "../less/forms.less";
import "../less/menus.less";
import "../less/infobox.less";
import "../less/messagebox.less";
-import "./Explorer/Controls/InputTypeahead/InputTypeahead.less";
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";