[BUGFIX] Le focus de Pix Select ne fonctionne pas dans tous les cas (…

…PIX-14876) #743
1024pix · Oct 16, 2024 · 00e796a · 00e796a
2 parents 65e9b64 + fa78620
commit 00e796a
Show file tree

Hide file tree

Showing 2 changed files with 34 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,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`<div class='tab-interface'>
+  <div role='tablist' aria-label='Sample Tabs'>
+    <span role='tab' aria-selected='true' aria-controls='panel-1' id='tab-1' tabindex='0'>
+      Je ne dois pas être focus !
+    </span>
+  </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();
+      });
     });
   });