[@types/react] Bug after update to version 18.2.61

[vimerzzz]

Before this version, my code works normally, but after update @types/react to v18.2.61. it shows up the error:

Type 'ForwardRefExoticComponent<Omit<BootstrapDateFieldProps, "ref"> & RefAttributes<HTMLDivElement>>' is not assignable to type 'ComponentType<BaseSingleInputFieldProps<Moment | null, Moment, FieldSection, any>> | undefined'.
  Type 'ForwardRefExoticComponent<Omit<BootstrapDateFieldProps, "ref"> & RefAttributes<HTMLDivElement>>' is not assignable to type 'FunctionComponent<BaseSingleInputFieldProps<Moment | null, Moment, FieldSection, any>>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<Omit<BootstrapDateFieldProps, "ref"> & RefAttributes<HTMLDivElement>> | undefined' is not assignable to type 'WeakValidationMap<BaseSingleInputFieldProps<Moment | null, Moment, FieldSection, any>> | undefined'.
        Type 'WeakValidationMap<Omit<BootstrapDateFieldProps, "ref"> & RefAttributes<HTMLDivElement>>' is not assignable to type 'WeakValidationMap<BaseSingleInputFieldProps<Moment | null, Moment, FieldSection, any>>'.
          Types of property 'ref' are incompatible.
            Type 'Validator<LegacyRef<HTMLDivElement> | undefined> | undefined' is not assignable to type 'Validator<Ref<HTMLDivElement> | undefined> | undefined'

at line:

slots={{ field: BootstrapDateField, ...props.slots }}

Below is my component if you're interested

interface BootstrapFieldProps extends BsPrefixRefForwardingComponent<"input", FormControlProps> {
    inputRef?: React.Ref<any>;
    InputProps?: {
        ref?: React.Ref<any>;
        endAdornment?: React.ReactNode;
        startAdornment?: React.ReactNode;
    };
    error?: boolean;
    focused?: boolean;
    ownerState?: any;
}

type BootstrapFieldComponent = ((
    props: BootstrapFieldProps & React.RefAttributes<HTMLDivElement>,
) => React.JSX.Element) & { propTypes?: any };

const BootstrapField = React.forwardRef(
    (props: BootstrapFieldProps, ref: React.Ref<HTMLDivElement>) => {
        const {
            inputRef,
            InputProps: { ref: containerRef, startAdornment, endAdornment } = {},
            error,
            focused,
            ownerState,
            ...other
        } = props;

        const handleRef = useForkRef(containerRef, ref);

        return (
            <div className="d-flex align-items-center" ref={handleRef}>
                {startAdornment}
                <Form.Control autoComplete="none" type="text" ref={inputRef} {...other}></Form.Control>
                {endAdornment}
            </div>
        );
    },
) as BootstrapFieldComponent;

interface BootstrapDateFieldProps extends UseDateFieldProps<Moment>,
    BaseSingleInputFieldProps<
        Moment | null,
        Moment,
        FieldSection,
        DateValidationError
    > { }

const BootstrapDateField = React.forwardRef(
    (props: BootstrapDateFieldProps, ref: React.Ref<HTMLDivElement>) => {
        const {
            inputRef: externalInputRef,
            slots,
            slotProps,
            ...textFieldProps
        } = props;

        const {
            onClear,
            clearable,
            ref: inputRef,
            ...fieldProps
        } = useDateField<Moment, typeof textFieldProps>({
            props: textFieldProps,
            inputRef: externalInputRef,
        });

        /* If you don"t need a clear button, you can skip the use of this hook */
        const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
            useClearableField<
                {},
                typeof textFieldProps.InputProps,
                DateFieldSlotsComponent,
                DateFieldSlotsComponentsProps<Moment>
            >({
                onClear,
                clearable,
                fieldProps,
                InputProps: fieldProps.InputProps,
                slots,
                slotProps,
            });
        return (
            <BootstrapField
                ref={ref}
                inputRef={inputRef}
                {...processedFieldProps as any}
                InputProps={ProcessedInputProps}
            />
        );
    },
);

const BootstrapDatePicker = React.forwardRef(
    (props: DatePickerProps<Moment>, ref: React.Ref<HTMLDivElement>) => {
        return (
            <DatePicker
                ref={ref}
                {...props}
                dayOfWeekFormatter={(day) => day.toUpperCase()}
                slots={{ field: BootstrapDateField, ...props.slots }}
                slotProps={{
                    actionBar: {
                        actions: ["clear", "today", "accept"]
                    }
                }}
            />
        );
    },
);

[typescript-bot]

Thanks for the discussion about "react", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @johnnyreilly, @bbenezech, @pzavolinsky, @ericanderson, @DovydasNavickas, @theruther4d, @guilhermehubner, @ferdaber, @jrakotoharisoa, @pascaloliv, @Hotell, @franklixuefei, @Jessidhia, @saranshkataria, @lukyth, @eps1lon, @zieka, @dancerphil, @dimitropoulos, @disjukr, @vhfmag, @hellatan, @priyanshurav, @Semigradsky, @mattpocock.

[eps1lon]

React.RefAttributes is for the props you can pass to a component not the props your component sees. The distinction is important in all current React versions because you can pass in string refs. However, your component will never see string refs but just React.Ref<Instance>.

Take this example:

const Component = forwardRef(function Component(props, ref) {
  console.log(ref)
})

class App extends React.Component {
  render() {
    return <Component ref="component" />
  }
}

It's important that Component doesn't get a string but a ref object or callback ref.

Without knowing BsPrefixRefForwardingComponent, I can't know if there truly is a bug. I recommend trying to reduce the example as much as possible so that it fits into a TypeScript playground and any unrelated code removed.

[eps1lon]

This is a lot of code to debug the problem. Can you remove as much as possible until it no longer reproduces and inline all absolutely necessary lines of code?

[vimerzzz]

okay, wait me a sec

[vimerzzz]

@eps1lon pls check it again CodeSandbox

[vimerzzz]

@eps1lon The issue was fixed after upgrading mui/x-date-pickers to v7.0.0 and migrating some code based on docs. Well. i don't know why

[eps1lon]

Thank you for double checking. Closing since the original issue is resolved.