Topic: Closing mdb-auto-completer options programmatically
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.)
Dear @mdb2
Use the hide() method from MdbAutoCompleterComponent class to hide manually autocompleter dropdown.
Best Regards,
Damian
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
MdbAutoCompleterComponent is not recognized in the code
@ViewChild('auto', { static: false }) AutoCompleterElement: MdbAutoCompleterComponent;
ts error: Cannot find name 'MdbAutoCompleterComponent'.ts(2304)
@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?
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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