diff --git a/addon/components/pix-select.js b/addon/components/pix-select.js index 54cb6a4bd..b4cee5129 100644 --- a/addon/components/pix-select.js +++ b/addon/components/pix-select.js @@ -37,6 +37,10 @@ export default class PixSelect extends Component { element.style.setProperty('--pix-select-width', `${selectWidth}rem`); }); } + + this.elementHelper.waitForElement(`container-${this.selectId}`).then((element) => { + this.rootElement = element; + }); } get displayDefaultOption() { @@ -151,11 +155,11 @@ export default class PixSelect extends Component { focus() { if (this.isExpanded) { if (this.args.value) { - document.querySelector("[aria-selected='true']").focus(); + this.rootElement.querySelector("[aria-selected='true']").focus(); } else if (this.args.isSearchable) { document.getElementById(this.searchId).focus(); } else if (this.displayDefaultOption) { - document.querySelector("[aria-selected='true']").focus(); + this.rootElement.querySelector("[aria-selected='true']").focus(); } } } diff --git a/tests/integration/components/pix-select-test.js b/tests/integration/components/pix-select-test.js index ac7168d06..c2a978c23 100644 --- a/tests/integration/components/pix-select-test.js +++ b/tests/integration/components/pix-select-test.js @@ -391,6 +391,34 @@ module('Integration | Component | PixSelect', function (hooks) { // then assert.dom(select).isFocused(); }); + + test("it should focus first element of Pix Select even when there's an aria-selected=true somewhere", async function (assert) { + // given + const screen = await render( + hbs`
+
+ + Je ne dois pas ĂȘtre focus ! + +
+
+<:label + >{{this.label}}`, + ); + + // when + await screen.getByLabelText('Mon menu déroulant').focus(); + + await userEvent.keyboard('[ArrowDown]'); + + await screen.findByRole('listbox'); + fireEvent(document.querySelector('.pix-select__dropdown'), new Event('transitionend')); + + const option = screen.getByRole('option', { name: 'Choisissez une option' }); + + // then + assert.dom(option).isFocused(); + }); }); });