Inflexible Typing on DropdownToggle

[ouifi]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

The Dropdown props are perhaps too inflexible.

I would like to replicate an Autocomplete-like component (like Mui), and tried to follow the "Custom Dropdown Components" as a starting point.

I do this by substituting the CustomToggle with a FormControl component, making sure the props and ref are correctly forwarded. However, when using the Dropdown.Toggle and slotting CustomToggle into the as prop, the typing of onChange does not reflect this. The component renders fine and looks great, exactly how I wanted it. However I cannot access the inner input.

The typing of Dropdown assumes the ref will always be forwarded to a button down the line. Looking at the component definition here, the typing confirms this.

I am not good enough with Typescript to create a PR myself. Indeed, this may be an intentional decision to restrict the Dropdown functionality. I do not know. Any help or insight is appreciated, and I am thankful for all the hard work this team puts into this library.

Expected behavior

I expected the prop types of Dropdown.Toggle to be in accord with the prop types I passed in to the function via the as prop.

To Reproduce

No response

Reproducible Example

import React from 'react';
import { Form, FormControlProps, Dropdown } from 'react-bootstrap';

const CustomToggle = React.forwardRef<HTMLInputElement, FormControlProps>(
    (props, ref) => (
        <Form.Control type="text" ref={ref} onChange={(e) => { e.preventDefault(); if (props.onChange) { props.onChange(e); } }}/>
    )
);

type AutocompleteSimpleOption = string

type AutocompleteProps = {
    options: Array<AutocompleteSimpleOption>
}

const Autocomplete = (props: AutocompleteProps) => {
    return <Dropdown show>
        {/* Error in the below line, "value" key not valid on e.target because e is a button event*/}
        <Dropdown.Toggle as={CustomToggle} onChange={e => console.log(e.target.value)}/>
        <Dropdown.Menu>
            {
                props.options.map(
                    elem => <Dropdown.Item>{elem}</Dropdown.Item>
                )
            }
        </Dropdown.Menu>
    </Dropdown>;
};

export default Autocomplete;

Screenshots

No response

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.1.0

What version of Bootstrap are you using?

5.1.3

Additional context

No response