In order to incorporate emojis into our chat, we have decided to utilize the library available at https://github.com/ahkohd/ngx-emoji-picker. However, we are encountering an issue where selecting an emoji from the picker automatically sends the message without allowing users to continue typing or clicking the send button. Below is the relevant code snippet:
SendMessage() {
if (this.message) {
console.log('ts', this.receiverData.username);
this.msgService
.SendMessage(this.user._id, this.receiverData._id, this.receiverData.username, this.message)
.subscribe(data => {
this.socket.emit('refresh', {});
this.message = '';
});
}
}
handleSelection(event) {
console.log(event.char);
this.message += event.char;
}
HTML
<div class="message-input">
<div class="wrap">
<div class="colinput">
<input [(ngModel)]="message" [ngModelOptions]="{standalone: true}"
(keypress)="IsTyping()" type="text" placeholder="Write your message..." />
</div>
<i class='attachment'
(click)="toggled = !toggled"
[(emojiPickerIf)]="toggled"
[emojiPickerDirection]="'top'"
(emojiPickerSelect)="handleSelection($event)">😄</i>
<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
We are seeking insights on what might be causing this particular issue and how it can be resolved.