TypeScript reports error on form attribute of button element

Although in the MDN page of HTML button element there is an attribute of form that serves the purpose of connecting submit button to the form to which it belongs to (they do not need to be in the parent child hierarchy) TypeScript is giving me error when I create a button like this:

<button	type='submit' form='createCustomerForm'>

This is a full TS error message:

> TS2322: Type 'string | HTMLFormElement | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'. index.d.ts(2083, 9): The expected type comes from property 'form' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'

Considering that value of this button should be string, an id of the form itself, I do not understand really this error, nor its message.

My question is can someone explain what is the reason why the type of value passed to this attribute can be null or the HTMLFormElement. To me this does not make a lot of sense. Also, how to fix this error message without disabling ts?

You can find code sandbox with this error following this link

Redacted, but code with reproducible error is here:

import { MouseEventHandler, PropsWithChildren, ReactNode } from "react";
import "./styles.css";

type ButtonType = {
  inactive?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
  text: string | ReactNode;
  type?: "button" | "submit" | "reset";
} & Partial<HTMLButtonElement>;

const Button = ({ inactive, text, type = "button", ...rest }: ButtonType) => (
  <button disabled={inactive} type={type} {...rest}>
    {text}
  </button>
);

const FormDialog = ({ children }: PropsWithChildren) => (
  <dialog>
    <form id="createCustomerForm">
      <header>
        <h4>Create customer</h4>
        <button autoFocus onClick={() => {}} type="button">
          X
        </button>
      </header>
      <div>{children}</div>
      <footer>
        <div>
          <Button onClick={() => {}} text="close" type="button" />
        </div>
        <div>
          <Button form="createCustomerForm" text="submit" type="submit" />
        </div>
      </footer>
    </form>
  </dialog>
);

export default function App() {
  return (
    <FormDialog>
      <input type="text" id="customerName" />
    </FormDialog>
  );
}

Instead of Partial<HTMLButtonElement>, there are two options:

• React.ComponentPropsWithoutRef<'button'>

• React.ButtonHTMLAttributes<HTMLButtonElement>

type ButtonType = {
	inactive?: boolean;
	onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
	text: string | ReactNode;
	type?: 'button' | 'submit' | 'reset';
} & React.ComponentPropsWithoutRef<'button'>;

Or

type ButtonType = {
	inactive?: boolean;
	onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
	text: string | ReactNode;
	type?: 'button' | 'submit' | 'reset';
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

codesandbox

Let's see the HTMLButtonElement interface:

node_modules/typescript/lib/lib.dom.d.ts:

interface HTMLButtonElement extends HTMLElement {
    disabled: boolean;
    /** Retrieves a reference to the form that the object is embedded in. */
    readonly form: HTMLFormElement | null;
    // ...
}

The HTMLButtonElement interface provides properties and methods for HTMLButtonElement, it's DOM, not the interface for HTML <button> tag's attributes. That's why the form property is a read-only property and its value is a HTMLFormElement

The ButtonHTMLAttributes interface provides the attributes for <button> html tag(a built-in component in React).

node_modules/@types/react/ts5.0/index.d.ts:

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
    disabled?: boolean | undefined;
    form?: string | undefined;
    //...
}

form is string type, its value is a form element's id.