flowbite-svelte icon indicating copy to clipboard operation
flowbite-svelte copied to clipboard

TypeScript: Autocomplete shows more options than a component has

Open cintek opened this issue 4 months ago • 5 comments

Using v0.46.20 my IDE shows more options for components than they should have. Here an example for Radio:

radio_options

The cause is that $$Props in src/lib/forms/Radio.svelte is extending HTMLInputAttributes: interface $$Props extends HTMLInputAttributes {

The problem is that a radio input doesn't have such attributes like max or maxLength and if the IDE makes wrong suggestions you would always have to look into documentation to be sure that a component really has an attribute.

I suggest to define $$Props like this (again an example for Radio):

interface $$Props {
    color?: FormColorType;
    custom?: boolean;
    inline?: boolean;
    group?: number | string | undefined;
    value?: number | string;
    spacing?: string;
    checked?: HTMLInputAttributes["checked"];
  }

So, don't extend HTMLInputAttributes but map the props to the attributes of HTMLInputAttributes. Yes, this is more work for you maintainers of flowbite-svelte but it makes using your library easier.

cintek avatar Sep 30 '24 08:09 cintek