Closing mdb-auto-completer options programmatically


Topic: Closing mdb-auto-completer options programmatically

mdb2 pro asked 5 years ago

Expected behavior

options should close when associated input loses focus

Actual behavior

When the focus is moved from the input element programatically, using e.g., elementRef.focus() to a different element, the options list is kept open.

How can I close it manually ?

Resources (screenshots, code snippets etc.)


Damian Gemza staff answered 5 years ago

Dear @mdb2

Use the hide() method from MdbAutoCompleterComponent class to hide manually autocompleter dropdown.

Best Regards,

Damian


mdb2 pro answered 5 years ago

Great !

How ?

Can you share an example ?

Is this feature documented ?


Damian Gemza staff answered 5 years ago

Dear @mdb2

We haven't got described such an example in our docs, but it's very easy.

Just use the ViewChild to get the MdbAutoCompleterComponent class, and with this ViewChild instance call the hide() method in the place, where your focusing other element - elementRef.focus() . That's all.

Best Regards,

Damian


mdb2 pro answered 5 years ago

MdbAutoCompleterComponent is not recognized in the code

@ViewChild('auto', { static: false }) AutoCompleterElement: MdbAutoCompleterComponent;

ts error: Cannot find name 'MdbAutoCompleterComponent'.ts(2304)

mdb2 pro answered 5 years ago

  @ViewChild('auto', { static: false }) AutoCompleterElement: ElementRef;

Doesn't recognize hide().

All of these doesn't work:

this.SupplierAutoCompleterElement.hide();
this.SupplierAutoCompleterElement.nativeElement.hide();
this.SupplierAutoCompleterElement.el.nativeElement.hide();

Arkadiusz Idzikowski staff commented 5 years ago

Did you import { MdbAutoCompleterComponent } from ng-uikit-pro-standard?


mdb2 pro answered 5 years ago

Found it !

I had 2 auto completers in the code and a name mixup.

Now it works. Thanks

P.S. Better have the .hide() method in the API part of the component. It is just one line in the table


Arkadiusz Idzikowski staff commented 5 years ago

Glad it works, we will update the documentation.


mdb2 pro answered 5 years ago

Fixed in 8.1.1.......


itay pro answered 5 years ago

Returned in 8.6.0 ....


Arkadiusz Idzikowski staff answered 5 years ago

https://mdbootstrap.com/docs/angular/changelog/#840

As you can see in our changelog - we decided to drop support for this solution in version 8.4.0. Closing dropdown automatically when other element is focused programatically caused many problems in normal dropdown opening/closing and there is no one good solution for all cases in which the dropdown should be closed.

We are aware that this is not a perfect solution, but we decided to do that because we think that programmatic change of focused element is not as common as other cases and it's easy to also use autocompleter .hide() method after elementRef.focus().

In this specific case, please use the previous solution mentioned by Damian Gemza and also call .hide() method programatically to close the dropdown.


itay pro commented 5 years ago

OK..............


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No