Description
Is your feature request related to a problem? Please describe
For examples on how to migrate these components, please read #4031, #4135, and #3992.
A clear and concise description of what the problem is.
Currently, not all of our components properly forward the passed in ref prop to the underlying component. This leads to end-users not being able to access the underlying DOM node (#3923 and #4012).
Describe the solution you'd like
Migrate the remaining class components to be ref forwarders. The components that need to be migrated are:
- [ ] Modal
- DropdownToggle (chore: react overlays #4661)
- ToggleButton ([#4194] - ref forwarding for ToggleButton #4640)
- NavDropdown (Add ref Forwarding to NavDropdown #4626)
- PageItem
- ToggleButtonGroup (fix(toggle-button-group): migrate to be ref forwarder #4605)
- Pagination (fix(Pagination): support for ref attribute #4593)
- AbstractNav (fix(AbstractNav): allow passed in refs to be properly forwarded #4031)
- ProgressBar
- ResponsiveEmbed (fix(ResponsiveEmbed): support for ref attribute #4595)
- Navbar
- Image
- TabContent (fix(TabContent): support for ref attribute #4594)
- Table (fix(Table): allow passed in refs to be properly forwarded #4592)
Describe alternatives you've considered
So currently we have two different approaches of handling forwarding refs; per-component or through a HOC called createBootstrapComponent. I'm personally unsure about which approach to use for our codebase, but we should plan to choose one approach and stick with it for consistency. IMO we should handle this per-component, as using a HOC here might make the implementation of our codebase more complex than it's worth. This would involve migrating all of the components that use createBootstrapComponent, which some of them are included in the above list.