add dropdown primitive ctd

addon/components/dropdown/index.gjs

@@ -94,7 +94,11 @@ export default class Dropdown extends Component {
       return;
     }
 
+    event.preventDefault();
+
     this.toggle();
+
+    this._ensureFocus();
   }
 
   @action
@@ -209,6 +213,10 @@ export default class Dropdown extends Component {
     this.args.onClose?.(reason);
   }
 
+  _ensureFocus() {
+    this.triggerElement.focus({ focusVisible: false });
+  }
+
   @cached
   get _api() {
     return {

tests/integration/components/dropdown/index/focus-test.gjs

@@ -1,4 +1,4 @@
-import { module, test } from 'qunit';
+import { module, test, todo } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
 import { render, focus, click } from '@ember/test-helpers';
 import Dropdown from '@zestia/ember-select-box/components/dropdown';
@@ -172,4 +172,47 @@ module('dropdown (focus)', function (hooks) {
 
     assert.dom('.outside').isFocused();
   });
+
+  test('auto focusing an element inside the dropdown content', async function (assert) {
+    assert.expect(1);
+
+    await render(<template>
+      <Dropdown as |dd|>
+        <dd.Trigger />
+        {{#if dd.isOpen}}
+          <dd.Content>
+            <input aria-label="example" class="inside" {{autoFocus}} />
+          </dd.Content>
+        {{/if}}
+      </Dropdown>
+    </template>);
+
+    await click('.dropdown__trigger');
+
+    assert.dom('.inside').isFocused();
+  });
+
+  test('focus-visible', async function (assert) {
+    assert.expect(1);
+
+    await render(<template>
+      {{! template-lint-disable no-forbidden-elements }}
+      <style>
+        .dropdown__trigger:focus-visible { outline: 2px solid red; }
+      </style>
+      <Dropdown as |dd|>
+        <dd.Trigger />
+      </Dropdown>
+    </template>);
+
+    await click('.dropdown__trigger');
+
+    assert.dom('.dropdown__trigger').hasStyle(
+      { outline: 'rgb(255, 0, 0) solid 2px' },
+      `the dropdown's focus management does not accidentally cause
+       focus-visible styles to apply. (here, the trigger was clicked,
+       whereas the styles should only apply if the user had navigated
+       to the element using the keyboard`
+    );
+  });
 });

tests/integration/components/select-box/index/focus-test.gjs

@@ -556,7 +556,7 @@ module('select-box (focus)', function (hooks) {
     );
   });
 
-  todo('focus-visible', async function (assert) {
+  test('focus-visible', async function (assert) {
     assert.expect(1);
 
     await render(<template>
@@ -582,7 +582,7 @@ module('select-box (focus)', function (hooks) {
 
     await click('.select-box .dropdown__trigger');
 
-    assert.dom('.select-box .dropdown__trigger').doesNotHaveStyle(
+    assert.dom('.select-box .dropdown__trigger').hasStyle(
       { outline: 'rgb(255, 0, 0) solid 2px' },
       `the select box's focus management does not accidentally cause
        focus-visible styles to apply. (here, the trigger was clicked,