`Stack` does not properly forward ref

[iansan5653]

Stack appears to accept a ref prop based on the TypeScript types, but this ref is not actually bound to the underlying element:

export function Example() {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => console.log(ref.current))

  return <Stack {...props} ref={ref}>contents</Stack>
}

If Stack correctly forwarded its ref, the console would log an HTMLDivElement instance. However, it instead always logs null.

[Jaykhanderay]

import React, { forwardRef } from "react";

const Stack = forwardRef((props, ref) => {
return (
<div {...props} ref={ref}>
{props.children}

);
});

export default Stack;

[Rakesh31-syc]

In React, when a ref is passed to a component, that component must forward the ref to a DOM element using React.forwardRef. If the Stack component does not implement forwardRef, the ref will not be attached to the underlying DOM element, resulting in ref.current being null or undefined.

import React, { useRef, useEffect } from 'react';

export function Example(props) {
const ref = useRef(null);

useEffect(() => {
console.log(ref.current);
}, []);

return <Stack {...props} ref={ref}>contents;
}

[lesliecdubs]

Primer First Responder, we'd love your help fixing this ref!

[joshblack]

@iansan5653 I believe the types might be too loose for Stack which might be part of the problem here 🤔 The component does not currently support ref but the types seem to be allowing basically anything to be passed in so it has the appearance of being supported.

We've been trying to find a good way to do polymorphic as types and this seems to be a limitation with the approach we have 😅 Let me see if we can address that separately.

For Stack specifically, would it still be desirable for it to accept a ref? We can treat this as an enhancement then and get it added.

[nita939]

Q gak retiii

[iansan5653]

For Stack specifically, would it still be desirable for it to accept a ref? We can treat this as an enhancement then and get it added.

Yeah, I think this would be expected for such a low-level component. Since it's practically a lightweight div wrapper, it's definitely useful to be able to take a ref.

One simple example is that Stack could be used as a toolbar with useFocusZone if it forwarded a ref.

[Omerezoo]

export function Example() {
const ref = useRef(null)

useEffect(() => console.log(ref.current))

return <Stack {...props} ref={ref}>contents
}

[Sameer1-oo]

export function-example (){
const ref = use-Ref(null)
use-Effect (() =>console.log (ref.current)
return < stack {...props}
ref = ref {ref} = > contents
}