diff --git a/addon/components/dropdown/index.gjs b/addon/components/dropdown/index.gjs
index ca5a033f..d8b5a117 100644
--- a/addon/components/dropdown/index.gjs
+++ b/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 {
diff --git a/tests/integration/components/dropdown/index/focus-test.gjs b/tests/integration/components/dropdown/index/focus-test.gjs
index 0b29d147..9a06d132 100644
--- a/tests/integration/components/dropdown/index/focus-test.gjs
+++ b/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(
+
+
+ {{#if dd.isOpen}}
+
+
+
+ {{/if}}
+
+ );
+
+ await click('.dropdown__trigger');
+
+ assert.dom('.inside').isFocused();
+ });
+
+ test('focus-visible', async function (assert) {
+ assert.expect(1);
+
+ await render(
+ {{! template-lint-disable no-forbidden-elements }}
+
+
+
+
+ );
+
+ 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`
+ );
+ });
});
diff --git a/tests/integration/components/select-box/index/focus-test.gjs b/tests/integration/components/select-box/index/focus-test.gjs
index ee3d4e17..a03427b9 100644
--- a/tests/integration/components/select-box/index/focus-test.gjs
+++ b/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(
@@ -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,