Status of `dropdownId` arg?

[nwhittaker]

The <BasicDropdown> component includes a way to override the <BasicDropdownContent> component's id attribute:

ember-basic-dropdown/addon/components/basic-dropdown.ts

Line 41 in 3df82cf

dropdownId?: string;

But it's undocumented on https://ember-basic-dropdown.com/docs/api-reference. Is it safe to use? If so, it looks like there are some bugs in the {{basic-dropdown-trigger}} modifier where the default id is hard-coded:

ember-basic-dropdown/addon/modifiers/basic-dropdown-trigger.ts

Lines 68 to 69 in 3df82cf

	element.setAttribute('aria-owns', `ember-basic-dropdown-content-${dropdown.uniqueId}`);
	element.setAttribute('aria-controls', `ember-basic-dropdown-content-${dropdown.uniqueId}`);

Specifying (or somehow acquiring) the id is useful in cases where focus needs to be trapped in the drop-down.

[Techn1x]

Hello! I had a hand in writing the modifier. It was a while ago, I think I just opted to use the uniqueId present in the "publicAPI" since that is yielded. Whereas dropdownId isn't really documented (like you found) nor was it clear to me what it is doing.

At a glance I think dropdownId was intended for selecting the dropdown content and I think it might be leftover code from before uniqueId was added. The dropdown likely only works when its dropdownId arg is left undefined, so we should probably remove it as an argument..

Whereas uniqueId is a guid for the main component, that is intended to be used in the strings for the ids of both trigger & content.

Specifying (or somehow acquiring) the id is useful in cases where focus needs to be trapped in the drop-down.

If it helps, the uniqueId is yielded as part of the "publicAPI"... though it is just the guid, rather than the full ember-basic-dropdown-content-${uniqueId} so it's likely not that helpful unless you just need some kind of unique reference for this dropdown to do some logic with

How are you aiming to apply the focus trap? Could you apply it perhaps as a modifier on the content element? The focus-trap modifier below would be able to get the element id that you're after

<BasicDropdown as |dd|>
  <button {{basic-dropdown-trigger @dropdown=dd}}>trigger</button>
  <dd.Content {{focus-trap}}>content </dd.Content>
</BasicDropdown>

[Techn1x]

And I've now just realised that this post I replied to is from 2022 😄 ah well, hope my response is helpful regardless

[nwhittaker]

And I've now just realised that this post I replied to is from 2022 😄 ah well, hope my response is helpful regardless

Yeah, the code I was maintaining is long gone. Thanks for looking into it anyway 😅.

Regarding the focus-trap: It was the ember-focus-trap modifier where I believe I was looking for a way to streamline setting its passthrough fallbackFocus option.

[mkszepp]

@nwhittaker i agree @Techn1x, its not documented and i think it isn't working anymore like it was on begin...

Looking into the history the dropdownId was introduced in year 2016 together with triggerId.
The triggerId was already removed, the dropdownId was maybe always forget.

It looks like many years ago (2016) the uniqueId was introduced instead, which is present in public api...

As there is no test... i think we can deprecate it in v8 and we will remove in next major... i will look to prepare this in next time