Radio - Cannot find name FormDataEvent

[adreznv]

Hi, I'm using shoelace in an Angular project. In my module, I have individual imports for button, tab, input, select, menu, checkbox and others and using them without issue. When I add radio or radio-group, compile fails with:

Error: node_modules/@shoelace-style/shoelace/dist/internal/form.d.ts:18:27 - error TS2304: Cannot find name 'FormDataEvent'.
18     handleFormData(event: FormDataEvent): void;

shoelace: 2.0.0-beta.76 (tried 72 also)
chrome: 102.0.5005.63

Thank you

[claviska]

A quick search uncovered this post: https://stackoverflow.com/questions/66505225/typescript-property-formdata-does-not-exist-on-type-event

As I see, Typescript currently doesn't support this event type yet, but they have an open issue related to it here. You can verify it is missing in the general definitions as well.

At this stage, you either have to introduce a custom type(like the one in the issue provided above) or annotate the event as any. Once again, this won't work on Safari.

The TypeScript issue linked from that post has a suggestion:

interface FormDataEvent extends Event {
    readonly formData: FormData;
};
interface FormDataEventInit extends EventInit {
    formData: FormData;
};
declare var FormDataEvent: {
    prototype: FormDataEvent;
    new(type: string, eventInitDict?: FormDataEventInit): FormDataEvent;
};

Shoelace is currently using TS 4.7.2 and I didn't have any problem with it, so maybe it was added and you're on an older version where it's not supported. 🤷🏻‍♂️

[adreznv]

Thanks for the info - will look at the typescript version. Out of curiosity, why are radio / radio-button [apparently] the only components which have a typed formSubmitController, which require the import { FormSubmitController } from '../../internal/form';, reference, which adds this dependency?

[claviska]

All form controls use the same controller, but just radios.