fix(toggle): trigger focus and blur on click

[thetaPC]

Issue number: N/A

---

What is the current behavior?

The blur and focus events do not trigger when clicking even though the value changes. Those events are only triggered when dragged.

This leads to Angular validation to not work accurately when clicking so the ion-touched is never added to the toggle since it relies on the blur event.

What is the new behavior?

• The blur and focus events also trigger on click. This follows the same logic as ion-checkbox.

Does this introduce a breaking change?

• Yes
• No

Other information

How to test:

Recommendation to use toggle/test/basic/index.html: Preview

Add the following script:

<script>
  document.addEventListener('ionChange', () => {
    console.log('toggle: ionChange')
  });

  document.addEventListener('ionFocus', () => {
    console.log('toggle: ionFocus')
  });

  document.addEventListener('ionBlur', () => {
    console.log('toggle: ionBlur')
  });
</script>

Verify that the focus and blur events trigger when clicking and dragging.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2025 9:18pm