use @query for fieldset

justeattakeaway · Dec 12, 2024 · 1e81ef7 · 1e81ef7
1 parent d615f19
commit 1e81ef7
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/packages/components/pie-radio-group/src/index.ts b/packages/components/pie-radio-group/src/index.ts
@@ -6,7 +6,9 @@ import {
     type PropertyValues,
     type TemplateResult,
 } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import {
+    property, query, queryAssignedElements, state,
+} from 'lit/decorators.js';
 import {
     RtlMixin,
     defineCustomElement,
@@ -63,6 +65,9 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
     @queryAssignedElements({ selector: 'pie-radio' })
         _slottedChildren!: Array<HTMLInputElement>;
 
+    @query('fieldset')
+    private _fieldset!: HTMLInputElement;
+
     private _abortController!: AbortController;
 
     /**
@@ -261,13 +266,10 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
      * @param {boolean} enable - Whether to enable (`true`) or disable (`false`) the `tabindex` on the `fieldset`.
      */
     private _toggleFieldsetTabindex (enable: boolean): void {
-        const fieldset = this.shadowRoot?.querySelector('fieldset');
-
-        if (!fieldset) return;
         if (enable) {
-            fieldset.setAttribute('tabindex', '0');
+            this._fieldset.setAttribute('tabindex', '0');
         } else {
-            fieldset.removeAttribute('tabindex');
+            this._fieldset.removeAttribute('tabindex');
         }
     }