Implement Trigger as a class element modifier?

[Brad Overton]

Hi! I have had some trouble using ebd, regarding the trigger element, issues mostly due to the fact the trigger and the content of the trigger, are separate elements. For example;

<dd.Trigger>
  <MyUiButton class="some-class" @size="lg" />
</dd.Trigger>

• focus/tabbing through elements requires 2 tabs, since they're separate tabable elements
• potential layout weirdness - if the ebd trigger element is in a flex, it'll expand, but the button component is an inline-block by default, so it ends up being smaller than the trigger, which may or may not be immediately obvious to the dev that a click to the side of the button will open the dropdown.

I figured these could be solved by implementing the dropdown trigger as an element modifier, and then any component or element can be used as the trigger itself. Something along the lines of;

<BasicDropdown ... |dd|>
  <MyUiButton class="some-class" @size="lg" {{dropdown-trigger dropdown=dd}} />
  <dd.Content> ... </dd.Content>
</BasicDropdown>

EDIT: I've made a new PR over at: #626

Are the maintainers open to this idea? I don't think I would be the one to implement it fully, there's a lot of little bits and pieces and history I don't really understand - hoping to inspire someone else to run with the idea.

[Brad Overton]

Any thoughts on this? I could potentially do the work if there was some support behind the idea

[hoIIer]

@Techn1x I believe this is already possible (to use a custom element as the trigger).

https://ember-basic-dropdown.com/cookbook/no-trigger

<BasicDropdown as |dd|>
  <UiButton @dd={{dd}}/>
    Click me
  </UiButton>

  <dd.Content>
    hello world
  </dd.Content>
</BasicDropdown>

<button
  {{on "click" @dd.actions.toggle}}
>
  {{yield}}
</button>

[Brad Overton]

Oh. wow thankyou @burritoIand - I think that might actually be exactly what I was after!

[Brad Overton]

I dug a bit deeper into it and tested it out on some of my dropdown components - while we can do a triggerless dropdown this way (awesome!) it does require the user to implement the a11y and other bindings, which I didn't think of in my previous comment. The element modifier approach for a trigger would aim to handle all this. But I do like that this is at least possible (and wiring up the a11y manually isn't that hard)

https://ember-basic-dropdown.com/cookbook/no-trigger

Remember that almost always you will want to use the provided trigger because it takes care of all the A11y, bindings and classes for you, but when you can't it's good to know that you can still use your own markup and wire things together yourself.

https://github.com/cibernox/ember-basic-dropdown/blob/master/addon/templates/components/basic-dropdown-trigger.hbs#L11-L21

So I'll keep the issue open for now

If anyone else comes by this issue and does the triggerless dropdown as above, your custom trigger/button needs the data-ebd-id as well, or else the dropdown stays open

<button
  data-ebd-id="{{dd.uniqueId}}-trigger"
  {{on "click" @dd.actions.toggle}}
>
  {{yield}}
</button>