fix(select): prevent clicks on non-interactive elements inside ion-se…

…lect to ensure correct popover size (#697)

packages/core/src/components/select/select.spec.ts

@@ -347,9 +347,9 @@ describe('AtomSelect', () => {
 
     await page.waitForChanges()
     const mockFiltered = optionsMock.filter((option) => option?.tag?.label)
-    const instanceObjetct = page.rootInstance.filterOptionsWithTag(optionsMock)
+    const instanceObject = page.rootInstance.filterOptionsWithTag(optionsMock)
 
-    expect(Object.keys(instanceObjetct).length).toEqual(mockFiltered.length)
+    expect(Object.keys(instanceObject).length).toEqual(mockFiltered.length)
   })
   it('should filter options and attach tag element', async () => {
     const page = await newSpecPage({

packages/core/src/components/select/select.tsx

@@ -128,12 +128,29 @@ export class AtomSelect {
 
   componentDidLoad() {
     this.selectEl.addEventListener('ionDismiss', this.handleDismiss)
+    this.applyPointerEventsNone()
   }
 
   disconnectedCallback() {
     this.selectEl.removeEventListener('ionDismiss', this.handleDismiss)
   }
 
+  /*
+   * In some cases, individual elements inside `ion-select` are clickable, causing the popover to open with an incorrect size.
+   * For example, clicking on the arrow icon can result in a very small options overlay, leading to a poor user experience.
+   * This method is a workaround to fix this issue by adding `pointer-events: none` to elements inside the `ion-select`
+   * that are not the `label` or `icon`, ensuring a consistent overlay size.
+   */
+  private applyPointerEventsNone() {
+    const ionSelect = this.selectEl?.shadowRoot?.querySelector('ion-select')
+    const selectWrapper =
+      ionSelect?.shadowRoot?.querySelector('.select-wrapper')
+
+    if (selectWrapper) {
+      (selectWrapper as HTMLElement).style.pointerEvents = 'none'
+    }
+  }
+
   private handleChange: IonTypes.IonSelect['onIonChange'] = (event) => {
     this.value = event.detail.value
     this.atomChange.emit(this.value)