diff --git a/packages/core/src/components/select/select.spec.ts b/packages/core/src/components/select/select.spec.ts index 0289139d3..32707e2ce 100644 --- a/packages/core/src/components/select/select.spec.ts +++ b/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({ diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 776224130..bb2d1cda6 100644 --- a/packages/core/src/components/select/select.tsx +++ b/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)