HardwareBackButton type

Hello,

in your docs it says to use this code

document.addEventListener('ionBackButton', (ev) => {
  ev.detail.register(10, () => {
    console.log('Handler was called!');
  });
});

to register new events to the HardwareBackButton.

But I do get some type errors:

Type ‘BackButtonEvent’ does not satisfy the constraint ‘keyof DocumentEventMap’

I figured that I need create new file > dom.d.ts inside my types folder and add this code:

credit

import { BackButtonEventDetail } from "@ionic/core";

interface CustomEventMap {
  ionBackButton: CustomEvent<BackButtonEventDetail>;
}
declare global {
  interface Document {
    addEventListener<K extends keyof CustomEventMap>(
      type: K,
      listener: (this: Document, ev: CustomEventMap[K]) => void
    ): void;
  }
}
export {};

Now, when I write:

 useEffect(() => {
    document.addEventListener("ionBackButton", (e) => {
      e.detail.register(10, () => {
        //handle some stuff
      });
    });
  }, []);

i don’t have any type errors and ionBackButton is inside document.

I think the whole react community will appreciate if you could fix that so we won’t have to add this code in every project or use App.addListener.

Thanks,