forwardRef Conflicts With asChild Prop

[elson-currentcorp]

See example:

https://stackblitz.com/edit/vitejs-vite-vtntxz?file=src%2FApp.tsx

@react-refresh:666 Warning: [object Object]: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop

Use case is that I'm trying to focus the slider button externally.

[segunadebayo]

It seems you have the wrong set up here. You’re rendering the hidden input as a button which seems counterintuitive.

I believe you intend to render the thumb as a button, correct? If that’s the case, then the Slider.Thumb should be the correct element to add the asChild prop to

[elson-currentcorp]

https://stackblitz.com/edit/vitejs-vite-b2twem?file=src%2FApp.tsx
It will still throw an error, seems like asChild and ref props cannot be used together:

<Slider.Thumb index={0} asChild>
    <Button ref={ref} />
</Slider.Thumb>

[amegalulb]

@segunadebayo I am also dealing with this issue. Then i try to use element with asChild and pass ref into the child Input, this error appears in the console, but if i use just dataPicker.getInputProps() it works without error

Error

<DatePicker.Input asChild>
	<Input
	    ref={inputMaskRef}
	    {...restProps}
	/>
</DatePicker.Input>

Ok

<Input
            {...dataPicker.getInputProps()}
	    ref={inputMaskRef}
	/>

[elson-currentcorp]

@amegalulb Thanks, your second method suppressed the error for me. The only issue I encountered was with the DialogContent component which lost the closing animation when using getProps instead of the native component.