Upgrading to ionic 8.5+ breaks ion-toggle keyboard shortcut

Ionic Framework
1

I added support for keyboard shortcuts to my app with code like this:

const clickToggleById = (key: ValidKeysEnum): void => {
  const myToggle = document.querySelector(`#test-${key} ion-toggle`);
  if (myToggle instanceof HTMLElement) {
    // Only click the toggle if it is not disabled.
    if ('disabled' in myToggle) {
      if (!myToggle.disabled) {
        myToggle.click();
      }
    } else {
      myToggle.click()
    }
  }
};

This has been working since Ionic 5, but after updating from 8.4.x to 8.5+, it only allows me to use the shortcut once and then all shortcuts are inaccessible.

It seems that what is happening is that now, when ion-toggle has a click() event, it gets focus, which didn’t happen previously. This focus is blocking the keyboard shortcuts, because if I click somewhere else on the app with the mouse, then the keyboard shortcuts work again-- once-- until I click somewhere with the mouse, at which point they will work once, and so on.

But on Ionic < 8.5, I can just use the shortcuts as much as I want without having to adjust focus with the mouse.

How can I work around this change in 8.5?

2

Actually, it looks like all you need to do is add myToggle.blur():

const clickToggleById = (key: ValidKeysEnum): void => {
  const myToggle = document.querySelector(`#test-${key} ion-toggle`);
  if (myToggle instanceof HTMLElement) {
    // Only click the toggle if it is not disabled.
    if ('disabled' in myToggle) {
      if (!myToggle.disabled) {
        myToggle.click();
        myToggle.blur();
      }
    } else {
      myToggle.click();
      myToggle.blur();
    }
  }
};