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(); + + await click('.dropdown__trigger'); + + assert.dom('.inside').isFocused(); + }); + + test('focus-visible', async function (assert) { + assert.expect(1); + + await render(); + + 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(