Description
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