search

onaluf / fate

Flexible Angular Text Editor
MIT License
37 stars 14 forks source link

How to close dropdown #91

Open RFMV34 opened 3 years ago

RFMV34 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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)