innerRef prop in DropdownToggle no longer works after upgrading to 8.0.0

[YangusKhan]

Issue description

• components: DropdownToggle
• reactstrap version #8.0.0
• import method es
• react version #16.8.6
• bootstrap version #4.3.1

What is happening?

Before upgrading to 8.0.0, we were using the innerRef prop for DropdownToggle to grab the DOM element of the resulting output button, and after upgrading to 8.0.0 the ref is no longer getting set.

Code

Taking a look at what changed, it seems like PR #1427 is the culprit because now the innerRef prop getting passed to DropdownToggle is getting overwritten by the usage of <Reference> component (from react-popper). Line 91 in DropdownToggle.js is the culprit here.

After looking at the source code for react-popper/src/Reference.js, a simple fix would be to pass the innerRef prop to the <Reference> component, but per react-popper, it seems to need to be a function ref and not a React.Ref.

Since the PR in question affected all Dropdowns, Modals, and other components, I imagine this bug is present in all of those affected components as well (and probably causing issue #1463 ) as well. I did try passing the innerRef prop to the <Reference> component myself, and that did fix the bug, but since this seems to affect more than one component I didn't make my own Pull Request because I don't know the extent of all the reactstrap components it affects.

[nicogreenarry]

Update: The problem I was encountering was because I was using styled-components to wrap the Input, and I was passing the ref to the styled component's innerRef prop. styled-components passes props through to the underlying (wrapped) component, but guess what? The version of styled-components I was using had its own innerRef prop! When I used the code below on the raw reactstrap Input, it worked as intended. Also, it looks like the latest version of styled-components does away with the innerRef component, so I may still be able to use styled-components to style the Input.

---

I'm not sure if it's the same bug, but on version 8.0.0, I'm having trouble getting a proper ref to a textarea element. My Input looks like this:

<Input
  id="compose"
  innerRef={textareaEl}
  name="compose"
  onChange={(e) => setMessage(e.target.value)}
  type="textarea"
  value={message}
/>

When I try using the ref, and I log the value of the ref, I get this:

Input {props: {…}, context: {…}, refs: {…}, updater: {…}, getRef: ƒ, …}

Instead, I'd expect it to be a vanilla textarea component. When I add the same ref to a vanilla textarea element, and log the value of the ref, I get this:

<textarea name="compose" id="compose"></textarea>