Topic: mdb-auto-completer select item

bitjuice pro asked 5 years ago


I have a problem with the new component <mdb-auto-completer>

When I typed a search string in input control, a list of suggestions is shown correctly, but when I click on an option, this error is logged:

ERROR TypeError: text.trim is not a function
at MdbOptionComponent.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.MdbOptionComponent.handleMouseDown (ng-uikit-pro-standard.es5.js:3463)
at Object.eval [as handleEvent] (MdbOptionComponent.html:1)
at handleEvent (core.js:23009)
at callWithDebugContext (core.js:24079)
at Object.debugHandleEvent [as handleEvent] (core.js:23806)
at dispatchEvent (core.js:20458)
at core.js:20905
at HTMLDivElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)

How I can fix it?




Arkadiusz Idzikowski staff answered 5 years ago

There is a (select) output that you can listen to. Please add it to the mdb-auto-completer component.

Vladislav Stoitsov free answered 5 years ago

I am trying to use this component but I see in the code of the component support only mousedown??? Why? The user can use the enter key from the keyboard??? Why not having event select for all of this events?

export declare class MdbOptionComponent {
el: ElementRef;
value: string;
clicked: boolean;
selectedItem: ISelectedOption;
constructor(el: ElementRef);
handleMouseDown(event: any): void;


Damian Gemza staff answered 5 years ago

Dear @bitjuice

Thanks for your report!

The first problem will be resolved with the next release of MDB Angular (next monday).

About your second problem - please use the (mousedown) event instead of (click) one, and it will work.

Best Regards,


bitjuice pro commented 5 years ago

Thanks Damian, I solved the second problem


Alejandro Medero free commented 5 years ago

mousedown works, but what about the enter or tab key?

bitjuice pro answered 5 years ago

Hi Darmian,

I solved this problem, but now I have two others one.

1) I created a my component with <mdb-auto-completer>

My component with autocomplete code

and added it in a body of  <mdb-tabset> component.
Component with pills

I see this error on the console:


How I can fix it?
2) How I can intercept the click event on autocomplete selected item? I tried to add (click) attribute on <mdb-option> but it doesn't work.
Thanks a lot

Dharmendra Prasad free commented 5 years ago

@bitjuice Hi, were you able to get the enter key or tab key working for this?

Damian Gemza staff answered 5 years ago

Dear @bitjuice 

Could you please provide me the reproduction example or reproduction code? I won't be able to debug your problem without this information.

Also please provide the reproduction steps - how to reproduce your problem.

Best Regards,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: PC
  • Browser: Chorme
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No