How to close dropdown

[RFMV34]

Hi,
I would like to close dropdown, when user pick some option in dropdown. Is it possible? I have not find anything in code.
Thanks!

[RFMV34]

I made workaround for this like Directive with:
this.el.nativeElement.querySelector('.fate-ui-dropdown').addEventListener('click', () => this.host.dropdownAction = false);
but I do not like this solution...

[onaluf]

Hi @RFMV34 ! This is the way it's supposed to happen, not sure why it isn't for you. When you implement the FateDropdown interface you have to have a valueChange event emitter. When the user picks the user in your dropdown, the dropdown component should emit the value for the user and it turn this will trigger the registered action linked to the component which will close the dropdown.

If you look at https://github.com/onaluf/fate/blob/6eb62195bb85b8610b09e560eaed2b8d28aa04ec/src/app/example-mention-dropdown/example-mention-dropdown.component.ts that's more or less what's going on.

If that didn't help you find the problem don't hesitate to give an example of a dropdown that cause this issue and I'll work on it !

[Raiper34]

Hi @RFMV34 ! This is the way it's supposed to happen, not sure why it isn't for you. When you implement the FateDropdown interface you have to have a valueChange event emitter. When the user picks the user in your dropdown, the dropdown component should emit the value for the user and it turn this will trigger the registered action linked to the component which will close the dropdown.

If you look at https://github.com/onaluf/fate/blob/6eb62195bb85b8610b09e560eaed2b8d28aa04ec/src/app/example-mention-dropdown/example-mention-dropdown.component.ts that's more or less what's going on.

If that didn't help you find the problem don't hesitate to give an example of a dropdown that cause this issue and I'll work on it !

I tried your example component, but after mention is picked, popover is not closed, so I open pull request with this functionality. btw RFMV34 is my corporate profile...

[onaluf]

That is very weird... which browser are you using? Would you be able to share a example of it failing?

I'm ready to accept your pull request but I would like to understand why it's not working for you first!

[RFMV34]

That is very weird... which browser are you using? Would you be able to share a example of it failing?

I'm ready to accept your pull request but I would like to understand why it's not working for you first!

Hi, I made example on Stackblitz using your example mention dropdown component. https://stackblitz.com/edit/angular-c4peuv?file=src/app/example-mention-dropdown/example-mention-dropdown.component.ts
After I pick mention, dropdown keeps opened for me. I am using Chrome Version 93.0.4577.82 (Official Build) (64-bit)