mdb-auto-completer select item

Topic: mdb-auto-completer select item

bitjuice pro asked 5 years ago

Hi,

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?

Thanks

Marco

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

Vladislav Stoitsov free answered 5 years ago

0 0 Best answer

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;

}

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

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,

Damian

bitjuice pro commented 5 years ago

Thanks Damian, I solved the second problem

Marco

Alejandro Medero free commented 5 years ago

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

Add comment

bitjuice pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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:

Error

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?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer