ember-power-select
ember-power-select copied to clipboard
[workaround found] part of trigger is a link: prevent showing dropdown on click
I am trying to use power-select to create an element which is a link and a caret that shows the dropdown, like this (only clicking the caret should show the dropdown):
__________________
| link text | ▼|
------------------
| option 1 |
| option 2 |
------------------
I tried to create a custom component, which is used as selectedItemComponent
, that contains the link. The problem I am having is that I seem to be unable to prevent the dropdown from showing when the link is clicked. What happens is: The dropdown shows up and then the transition to a different page happens.
It looks like the actual handling of the click is handled within basic-dropdown and so far I could not think of a way to make the underlying basic-dropdown behave the way I want.
I was also thinking about making just the caret the trigger, but then it gets difficult to left align the dropdown content with the link.
Is there currently a way to make this work?
I tried to add the following event handlers to my trigger component, but nothing works - I suspect because the dropdown event is handled before it reaches the implementation of my custom component?
click(e) {
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
return false;
},
mouseUp(e) {
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
return false;
},
mouseDown(e) {
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
return false;
}