Skip to content

Fixes issues with close event not firing when the search term doesn't match and ui closes #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sandeepsuvit wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixes issues with close event not firing when the search term doesn't match and ui closes #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a97692
Update mention.directive.ts
sandeepsuvit Jul 6, 2024
96ffa7e
Updated readme
sandeepsuvit Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 38 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ To install and start the demo application:
npm install
ng serve

To build the project

`npm run build angular-mentions`

To run the demo project

`npm run start demo-app`

### Usage

Add the package as a dependency to your project using:
Expand All @@ -37,7 +45,7 @@ import { MentionModule } from 'angular-mentions';
Add the `[mention]` directive to your input element:

```html
<input type="text" [mention]="items">
<input type="text" [mention]="items" />
```

Where `items` is a string array of the items to suggest. For example:
Expand All @@ -50,41 +58,44 @@ items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

The following optional configuration items can be used.

| Option | Default | Description |
| --- | --- | --- |
| items | | An array of strings or objects to suggest. |
| triggerChar | @ | The character that will trigger the menu behavior. |
| labelKey | label | The field to be used as the item label (when the items are objects). |
| disableSort | false | Disable sorting of suggested items. |
| disableSearch | false | Disable internal filtering (only useful if async search is used). |
| dropUp | false | Show the menu above the cursor instead of below. |
| maxItems | ∞ | Limit the number of items shown in the text. The default is no limit. |
| mentionSelect | | A function to format the selected item before inserting the text. |
| mentionFilter | | A function that returns the items to display. |
| allowSpace | false | Allow spaces while mentioning. |
| returnTrigger | false | Include the trigger char in the searchTerm event. |

For Example:
| Option | Default | Description |
| ------------- | ------- | --------------------------------------------------------------------- |
| items | | An array of strings or objects to suggest. |
| triggerChar | @ | The character that will trigger the menu behavior. |
| labelKey | label | The field to be used as the item label (when the items are objects). |
| disableSort | false | Disable sorting of suggested items. |
| disableSearch | false | Disable internal filtering (only useful if async search is used). |
| dropUp | false | Show the menu above the cursor instead of below. |
| maxItems | ∞ | Limit the number of items shown in the text. The default is no limit. |
| mentionSelect | | A function to format the selected item before inserting the text. |
| mentionFilter | | A function that returns the items to display. |
| allowSpace | false | Allow spaces while mentioning. |
| returnTrigger | false | Include the trigger char in the searchTerm event. |

For Example:

```html
<input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}">
<input
type="text"
[mention]="items"
[mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}"
/>
```

#### Output Events

The following output events can be used.

| Output | Description |
| --- | --- |
| `@Output() searchTerm EventEmitter<string>` | Emitted whenever the search term changes. Can be used to trigger async search.
| `@Output() itemSelected EventEmitter<any>` | Emitted when an item is selected.
| `@Output() opened EventEmitter<void>` | Emitted when the mentions panel is opened.
| `@Output() closed EventEmitter<void>` | Emitted when the mentions panel is closed.

| Output | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------ |
| `@Output() searchTerm EventEmitter<string>` | Emitted whenever the search term changes. Can be used to trigger async search. |
| `@Output() itemSelected EventEmitter<any>` | Emitted when an item is selected. |
| `@Output() opened EventEmitter<void>` | Emitted when the mentions panel is opened. |
| `@Output() closed EventEmitter<void>` | Emitted when the mentions panel is closed. |

### Item Templates

The appearance of the items displayed in the mention list menu can be customized using the
The appearance of the items displayed in the mention list menu can be customized using the
`[mentionListTemplate]` directive as shown in this example:

https://stackblitz.com/edit/angular-mentions-avatar
Expand All @@ -95,7 +106,7 @@ Instead of using the `[mentions]` directive, the component can also be used by o
`[mentionConfig]`, for example:

```html
<input type="text" [mentionConfig]="mentionConfig">
<input type="text" [mentionConfig]="mentionConfig" />
```

With the following structure:
Expand Down Expand Up @@ -124,6 +135,7 @@ let mentionConfig = {
]
}
```

This allows different lists and trigger characters to be configured.

Note that because objects are mutable, changes to the items within the config will not be picked up unless a new mentionConfig object is created.
6 changes: 6 additions & 0 deletions projects/angular-mentions/src/lib/mention.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,12 @@ export class MentionDirective implements OnChanges {
this.searchList.items = matches;
this.searchList.hidden = matches.length == 0;
}

// fixes close event not triggering when the search term doesn't match but the ui closes
if (matches.length == 0) {
this.searchList.hidden = false; // Forcing the search list hidden attribute as this isn't fiered when the ui closes
this.stopSearch();
}
}

showSearchList(nativeElement: HTMLInputElement) {
Expand Down