feat(NcSelect): Allow to filter users by email notation

[susnux]

☑️ Resolves

• Fix NcSelect does not recognize email addresses when angle bracket notation is used #4491

Allows to filter by the email notation like Jane <[email protected]>

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[raimund-schluessler]

Might be, that I do something wrong, but it doesn't seem to work for me in the styleguide:

[susnux]

Might be, that I do something wrong, but it doesn't seem to work for me in the styleguide

@raimund-schluessler Ah yes there was an issue if there is no subname defined, fixed that:

vokoscreenNG-2023-10-15_23-34-50.mp4

[raimund-schluessler]

Works now as expected (in the docs).

[Pytal]

Is it possible to have the matching chars bolded like when typing an email without angle brackets?

[susnux]

Is it possible to have the matching chars bolded like when typing an email without angle brackets?

Yes but need to adjust NcListItemIcon then.

[susnux]

@Pytal done

vokoscreenNG-2023-10-17_12-31-29.mp4

[raimund-schluessler]

Is it possible to have the matching chars bolded like when typing an email without angle brackets?

Yes but need to adjust NcListItemIcon then.

While this works, I feel like this duplicates the regex/match part. Couldn't we just set this.search appropriately in NcSelect when matching the email part, without touching NcListItemIcon?

So, when typing <olivia@example in NcSelect, do the matching in NcSelect and set this.search to olivia@example without the token. This way, the highlighting should work, and we wouldn't need to duplicate the matching code in NcListItemIcon.

[susnux]

So, when typing <olivia@example in NcSelect, do the matching in NcSelect and set this.search to olivia@example without the token. This way, the highlighting should work, and we wouldn't need to duplicate the matching code in NcListItemIcon.

Yes but when typing Olivia <olivia@example Olivia would not be highlighted.
So I think this is also a feature on the NcListItemIcon

[raimund-schluessler]

So, when typing <olivia@example in NcSelect, do the matching in NcSelect and set this.search to olivia@example without the token. This way, the highlighting should work, and we wouldn't need to duplicate the matching code in NcListItemIcon.

Yes but when typing Olivia <olivia@example Olivia would not be highlighted.

So I think this is also a feature on the NcListItemIcon

Ah, yes, I see. Valid point.

[dartcafe]

@Pytal Any chance to get this backported to v7?

[Pytal]

@Pytal Any chance to get this backported to v7?

We don't normally backport features @dartcafe, so I'd recommend using the latest v8 of the lib :)