ember-power-select icon indicating copy to clipboard operation
ember-power-select copied to clipboard

[workaround found] part of trigger is a link: prevent showing dropdown on click

Open st-h opened this issue 5 years ago • 2 comments

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;
  }

st-h avatar May 03 '19 15:05 st-h