# EuiCommentTextareaComponent

**Type:** component



`eui-comment-textarea` component providing an input area for composing and submitting comments.
Displays user avatar alongside textarea with send and cancel action buttons.
Implements reactive forms for comment input with automatic reset after submission or cancellation.
Includes accessibility features through Angular CDK A11y module with focus trapping.
Used within eui-comment-thread for adding new comments or replies.

```html
<eui-comment-textarea
  [currentAuthorAvatarUrl]="currentUser.avatar"
  [placeholder]="'Add your comment...'"
  (commentSend)="onSubmit($event)"
  (commentCancel)="onCancel()">
</eui-comment-textarea>
```

### Accessibility
- Focus is automatically trapped within the textarea using `cdkTrapFocus`
- Focus is captured on component initialization with `cdkTrapFocusAutoCapture`
- Send and Cancel buttons are keyboard accessible
- Placeholder text supports translation for internationalization

### Notes
- Form automatically resets after sending or canceling a comment
- Textarea auto-resizes based on content using `autoResize` directive
- Uses reactive forms for robust form state management
- Avatar is optional and can be omitted by not providing `currentAuthorAvatarUrl`


**Selector:** `eui-comment-textarea`

## Inputs
- **currentAuthorAvatarUrl**: `string` - URL path to the current user's avatar image. Displayed alongside the textarea to identify the commenter. Optional.
- **placeholder**: `string` - Placeholder text displayed in the textarea when empty. Supports translation keys for internationalization.

## Outputs
- **commentCancel**: `EventEmitter` - Emitted when the user cancels comment input. Payload: void Triggered when user clicks cancel button. Automatically resets the form.
- **commentSend**: `EventEmitter` - Emitted when the user submits a comment. Payload: string - the comment text entered by the user Triggered when user clicks send button. Automatically resets the form after emission.
