Object literal may only specify known properties, and '"on:accept"' does not exist in type 'Omit<HTMLInputAttributes, keyof HTMLAttributes<any>> & HTMLAttributes<any>'.

[rushirufu]

Describe the bug

Object literal may only specify known properties, and '"on:accept"' does not exist in type 'Omit<HTMLInputAttributes, keyof HTMLAttributes> & HTMLAttributes'.

Reproduction

  <script lang="ts">

    // @ts-ignore
  import { imask } from '@imask/svelte';

  // @ts-ignore
  const options = {
    mask: '{8}000000',
    lazy: false
  };
  let value = '';

  // @ts-ignore
  function accept({ detail: maskRef }) {
    console.log('accept', maskRef.value);
    value = maskRef.value;
  } 
  // @ts-ignore
  function complete({ detail: maskRef }) {
    console.log('complete', maskRef.unmaskedValue);
  }
</script>

`
    <h1>{value}</h1>
    <input
      {value}
      use:imask={options}
      on:accept={accept}
      on:complete={complete}
    />
`

on:accepte error 
`Object literal may only specify known properties, and '"on:accept"' does not exist in type 'Omit<HTMLInputAttributes, keyof HTMLAttributes<any>> & HTMLAttributes<any>'.ts(2353)`

### Logs

_No response_

### System Info

```shell
run:npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers
  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.63 GB / 11.73 GB
  Binaries:
    Node: 22.1.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    svelte: ^4.2.7 => 4.2.16

Severity

annoyance

[adiguba]

Hello,

This is "normal" because onaccept is not a valid event, but a custom one generated by @imask/svelte.

Open your app.d.ts and add this to declare the event on <input> :

declare module 'svelte/elements' {
    export interface HTMLInputAttributes {
        // Svelte 4
        'on:accept'?: FormEventHandler<HTMLInputElement> | undefined | null;
        // Svelte 5
        onaccept?: FormEventHandler<T> | undefined | null;
    }
}

[jasonlyu123]

As @/adiguba mentioned. This error is because the event is not a standard event. You can either enhance the type or ask the author to adjust the type definition following this doc

[adiguba]

As @/adiguba mentioned. This error is because the event is not a standard event. You can either enhance the type or ask the author to adjust the type definition following this doc

Oh nice ! I didn't known that trick !