Problems: don't limit ack message, fix #1122

src/panel-triggers/components/AckModal.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { cx, css } from 'emotion';
 import { ZBX_ACK_ACTION_ADD_MESSAGE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_CHANGE_SEVERITY, ZBX_ACK_ACTION_CLOSE } from '../../datasource-zabbix/constants';
-import { Button, VerticalGroup, Spinner, Modal, Input, Checkbox, RadioButtonGroup, stylesFactory, withTheme, Themeable } from '@grafana/ui';
+import { Button, VerticalGroup, Spinner, Modal, Input, Checkbox, RadioButtonGroup, stylesFactory, withTheme, Themeable, TextArea } from '@grafana/ui';
 import { FAIcon } from '../../components';
 import { GrafanaTheme } from '@grafana/data';
 
@@ -65,13 +65,13 @@ export class AckModalUnthemed extends PureComponent<Props, State> {
     };
   }
 
-  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({ value: event.target.value, error: false });
   }
 
-  handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.which === KEYBOARD_ENTER_KEY || event.key === 'Enter') {
-      this.submit();
+      // this.submit();
     } else if (event.which === KEYBOARD_ESCAPE_KEY || event.key === 'Escape') {
       this.dismiss();
     }
@@ -196,17 +196,16 @@ export class AckModalUnthemed extends PureComponent<Props, State> {
       >
         <div className={inputGroupClass}>
           <label className="gf-form-hint">
-            <Input className={inputClass}
+            <TextArea className={inputClass}
               type="text"
               name="message"
               placeholder="Message"
-              maxLength={64}
               autoComplete="off"
               autoFocus={true}
               value={this.state.value}
               onChange={this.handleChange}
-              onKeyUp={this.handleKeyUp}>
-            </Input>
+              onKeyDown={this.handleKeyPress}>
+            </TextArea>
             <small className={inputHintClass}>Press Enter to submit</small>
             {this.state.error &&
               <small className={inputErrorClass}>{this.state.errorMessage}</small>