eui documentation
  1. Components
  2. EuiCommentTextareaComponent

File

packages/components/eui-comment-thread/comment-textarea/eui-comment-textarea.component.ts

Description

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.

Example :
<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

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-comment-textarea
imports TranslateModule ReactiveFormsModule A11yModule EUI_TEXTAREA EUI_AVATAR EUI_BUTTON
styleUrls ../styles/_index.scss
templateUrl ./eui-comment-textarea.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

currentAuthorAvatarUrl
Type : string
Default value : null

URL path to the current user's avatar image. Displayed alongside the textarea to identify the commenter. Optional.
placeholder
Type : string
Default value : 'eui.ANSWER'

Placeholder text displayed in the textarea when empty. Supports translation keys for internationalization.

Outputs

commentCancel
Type : EventEmitter

Emitted when the user cancels comment input. Payload: void Triggered when user clicks cancel button. Automatically resets the form.
commentSend
Type : 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.

HostBindings

class
Type : string

Methods

Public onCommentCancel
onCommentCancel()
Returns : void
Public onCommentSend
onCommentSend()
Returns : void

Properties

Public form
Type : FormGroup
Default value : new FormGroup({ comment: new FormControl<string>(null), })

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""