0

I try to set the colspan of a textfield like in the documentation of Hilla. https://hilla.dev/docs/react/components/form-layout

<FormLayout
  responsiveSteps={[
    // Use one column by default
    { minWidth: 0, columns: 1 },
    // Use two columns, if layout's width exceeds 500px
    { minWidth: "500px", columns: 2 },
  ]}
>
  <TextField label="First name"></TextField>
  <TextField label="Last name"></TextField>
  <TextField label="Username" colspan="2"></TextField>
  <PasswordField label="Password"></PasswordField>
  <PasswordField label="Confirm password"></PasswordField>
</FormLayout>

I got an error on colspan. With colspan={"2"} or colsSpan={"2"} I got the expected result, but still got this error

[TypeScript] Type '{ colspan: string; label: string; }' is not assignable to type 'IntrinsicAttributes & Partial<Omit<Partial<{ defaultChecked?: boolean | undefined;

Can someone explain this to me? Sorry I am new to the frontend (Js & Typescript)

GoodBytes
  • 11
  • 2
  • Did you try the setting it like `colspan={2}` without the quotation marks? I think you are using a string instead of a number and that's why TypeScript complains. But I am not sure. – tdesero May 19 '23 at 10:02
  • I tried that - the Textfield get displayed correctly over 2 columns but the error still exists. I do not find a colspan/colSpan attribute in the Textfield provided by Hilla. I just find a aria-colspan/ariaColSpan but these seem to have no effect – GoodBytes May 19 '23 at 10:13
  • 1
    It sounds like the error reported at https://github.com/vaadin/react-components/issues/70. You can try using the workaround mentioned in the ticket using `@ts-expect-error`. – Tarek Oraby May 19 '23 at 12:00

0 Answers0