Ionic 4 ion-select在Firefox响应式设计模式下无法触发弹窗

云上老周

2026-5-14

Hey there, I’ve run into similar quirky browser-Ionic compatibility issues before, so let’s break down what’s happening here and how to fix it:

First, let’s confirm the root cause

Your testing already pointed to the key conflict: when ion-select is nested inside ion-item, Firefox’s Responsive Design Mode (RDM) for mobile/tablet viewports interferes with the click/touch event handling of the select component. This isn’t a User Agent issue (your manual UA test proved that) — it’s specifically how old versions of Firefox’s RDM handles event bubbling or touch simulation for nested Ionic components.

Quick fixes to try

1. Stop event propagation on the ion-select

Since the ion-item itself has built-in click/touch handlers, it might be intercepting the event before it reaches the ion-select. Add a stop-propagation rule to the select’s click event:

<ion-item>
  <ion-select (click)="$event.stopPropagation()">
    <!-- Your select options here -->
  </ion-select>
</ion-item>

If you’re using vanilla JS (no framework), you can add this via JavaScript:

document.querySelector('ion-select').addEventListener('click', (e) => {
  e.stopPropagation();
});

2. Upgrade your Firefox version

You’re on Firefox 71.0, which is quite outdated (released back in 2019). Mozilla has fixed dozens of RDM and touch simulation bugs in newer versions. Upgrading to the latest stable Firefox release will likely resolve this issue entirely without needing code changes.

3. Adjust RDM settings (quick test)

In Firefox’s Responsive Design Mode, check if the "Simulate touch events" toggle is enabled. Sometimes this toggle can cause unexpected behavior with component event handling — try toggling it off to see if the ion-select popup triggers normally.

4. Keep ion-select outside ion-item (if acceptable)

As you discovered, moving ion-select out of the ion-item container works immediately. If you need to keep the item-like styling, you can mimic the ion-item look with custom CSS instead of using the actual component.

Why this happens

Old versions of Firefox’s RDM, when simulating mobile viewports, modifies how touch and click events are dispatched. The ion-item component’s event handlers end up swallowing the event that should trigger the ion-select popup. When you remove the ion-item wrapper, there’s no upper-level handler intercepting the event, so the select works as expected.

内容的提问来源于stack exchange，提问作者arctic_hen7