Mention does not trigger input event & not usable for Reactive forms

[Lukas Budach]

Hi,

I'm trying to use the EJ2-Mention Angular component to provide users with an autocompletion in both the EJ2-RichTextEditor and regular <input> elements. For the former, everything seems fine so far. For the latter, there is an issue when trying to use the Mention component in combination with the Input being used in a Reactive form as the Angular docs describe it (see https://angular.dev/guide/forms/reactive-forms)

I've made a minimal example here: https://stackblitz.com/edit/github-8lkfb8-fbq1a5?file=src%2Fapp.component.ts

What happens is that the FormControl, which is updated as the Input component fires the input event, does not update its value when inserting a suggested entry from the Mention component by any means (TAB, RETURN, mouse click). It does, however, update when typing into the input after inserting the Mention suggestion. I have attached a ZIP archive with a short video of the behavior.

There is also no (documented) event that I could catch from the Mention component itself to try to work around this issue by manually triggering some sort of value update in the FormControl.

For the AutoComplete component, Reactive forms are considered. However, this component does not provide the functionality I am looking for here.

Is there any intend on making the Mention component trigger the input event of <input> components in later versions? Or do you have any known workarounds to this issue?

Thanks,
Lukas

Attachment: Incompatibility_Reactive_forms_and_Mention_component_65ba85d7.zip

[Kokila Poovendran]

Hi Lukas Budach,

Thank you for reaching out regarding the issue with the EJ2-Mention Angular component not triggering the input event when used with Reactive Forms.

We have reviewed your query and made modifications to your sample to achieve the desired behavior. Below is an updated example that includes an event handler for when a mention is selected. This will allow the FormControl to be updated appropriately.

Updated Code Example

You can implement the following changes in your Angular component:

 <ejs-mention [dataSource]='userData'  [target]='mentionTarget' (select)="onMentionSelect($event)"></ejs-mention>

onMentionSelect(event: any) {

    debugger;

    // Get the selected mention value

    const mentionValue = event.itemData.value || event.itemData;

    // Append the mention value to the current value in the input field

    const currentValue = this.formControl.value || '';

    this.formControl.setValue(currentValue + ' ' + mentionValue);

  }

Mention Selection Handling: We added the (select) event to the ejs-mention component, which triggers the onMentionSelect method when a mention is selected.

Updating the FormControl: In the onMentionSelect method, we retrieve the selected mention value and update the FormControl's value by appending it to the current value. This ensures that the FormControl reflects the inserted mention immediately.

You can view the updated sample here: Updated StackBlitz Example.

If you have any further questions or need additional assistance, feel free to reach out.

[Lukas Budach]

Hi,

thank you so much for the quick answer! Your solution with the select event partially works. There are two caveats that I found:

1. The select event does not trigger when using TAB to insert the currently highlighted item.
2. The code updating the form control does not remove any of the partial match the user already typed. While the input appears to be correct visually, the FormControl requires another input (like a space for instance) to properly reflect that state visible to the user. E.g., user types @Sel and then ENTER to insert Selma Rose -> The input component will read "Selma Rose" while the FormControl value will be "@Sel Selma Rose" in the updated StackBlitz Example you provided.

By looking some more in your code (now that I knew there might be undocumented events), I could identify the change event of the ejs-mention component, which fixes the first issue. It fires on TAB, ENTER and mouse clicks, so it will always trigger the update function.

I then also adapted the update function code to address issue number two.

Both of these changes are reflected in this updated StackBlitz Example.

One last thing: I think it would be great if the events available for the ejs-mention component would be documented in the API docs. There are already helpful comments on them when drilling into the code, but it would be much easier to find within the documentation.

Thanks again,

Lukas

[Mohamed Imran Thamin Ansari]

Hi Lukas,

 

We have thoroughly evaluated the issue you raised regarding the missing events for the ejs-mention component in the Angular API documentation. After careful analysis, we have considered it as bug and logged a defect report on our end. It will be resolved in our coming 2024 volume 3 SP release, which is expected to be rolled out at the mid of November, 2024.

 

You can track this bug's status in the below feedback.

 

Feedback: Mention component events not displayed in Angular API site

We appreciate your patience until then.

 

Regards,

Mohamed

[Deepika Arumugasamy]

Hi Lukas,

We deeply apologize for any inconvenience caused by the delay. Your patience and understanding are greatly appreciated. Due to the complexity of the issue, we require some additional time to resolve it. We kindly request your understanding and acceptance of this timeline adjustment. We plan to resolve this issue in our upcoming Volume 4 SP release, scheduled for January 28, 2025.

Regards,
Deepika

[Deepika Arumugasamy]

Hi Lukas,

We are glad to announce that our weekly patch release (28.2.5) has been rolled out. This release includes a fix for the issue where the Mention component events not displayed in Angular API site. 

 

API link: Angular Mention API component - Syncfusion

 

Please let us know if you need any further assistance on this.

Regards,
Deepika