[joy-ui] How to access the ref of the <input>?

[Eytan3000]

I was wondering how to use useRef with Joy UI Input or Textarea components.
I know that in Material UI it’s inputRef but I can’t make this work in Joy UI.

I’m currently using onChange with useState, but I’d like to avoid re-rendering for each type. Thanks, Eytan

[siriwatknp]

Input:

<Input slotProps={{ input: { ref } }} />

Textarea:

<Textarea slotProps={{ input: { ref } }} />

---

We can add a section in the docs that is specifically about input ref:

diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 06a8652a80..2c80a6d3a6 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -115,6 +115,8 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
+### Textarea ref
+
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.

[Eytan3000]

Thank you!

[siriwatknp]

Thank you!

Would you like to submit a PR?

[Gurjit11]

I would like to contribute to this issue can you assign it to me ? also i am new to open source here i think i need to add demo to the docs how to use Ref right ?

[oliviertassinari]

I know that in Material UI it’s […]

If we take Material UI, even if we have slot props: https://mui.com/material-ui/api/input/#prop-inputProps inputProps an inputRef prop is https://mui.com/material-ui/api/input/#prop-inputRef provided as well.

I think it opens the question of:

• What's the pros & cons?
• Is there a need for Joy UI and Material UI using a different tradeoff?
• If not, which one is best?

We can add a section in the docs that is specifically about input ref:

@siriwatknp I wonder a bit about the frequency of the need to access the input ref. Is this frequent enough to be worth a dedicated docs? I guess if it was in Material UI for a dedicated prop, it's likely the case, but I wonder if: 1. maybe inputRef was a mistake, it's not frequent enough: 2. if we can't teach this for all components.

[siriwatknp]

@siriwatknp I wonder a bit about the frequency of the need to access the input ref. Is this frequent enough to be worth a dedicated docs? I guess if it was in Material UI for a dedicated prop, it's likely the case, but I wonder if: 1. maybe inputRef was a mistake, it's not frequent enough: 2. if we can't teach this for all components.

We have the doc about the inner HTML input but we could make it more obvious to inner HTML input and ref?

[vortex73]

Is this issue still open?

[kavyantic]

It is a very common use case where we want to use ref with html inputs. That's why it should be given as a singleton root prop in the Input component for better developer experience and avoid deep merge for input props.