fix: Pix Select focused wrong when other elements had the aria-select…

…ed to true. Co-authored-by: Laura Bergoens <[email protected]> Co-authored-by: Jérémie Jadé <[email protected]> Co-authored-by: Fael Bassetti <[email protected]>
1024pix · Oct 16, 2024 · 97ea066 · 97ea066
1 parent fbab995
commit 97ea066
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git 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
@@ -391,6 +391,30 @@ 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`<div role='tabpanel'>
+  <div aria-label='Write' tabindex='0'>Je ne dois pas prendre le focus !</div>
+</div>
+<PixSelect @options={{this.options}} @placeholder={{this.placeholder}}><:label
+  >{{this.label}}</:label></PixSelect>`,
+        );
+
+        // 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();
+      });
     });
   });