ref doesn't reference

[frederickf]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-Date-Picker version
• [X] I have checked if this bug is not already reported

Description

I'm in the process of updating to the latest version. We were previously using ^8.1.1. Upon updating to ^10.2.0 ref.current created with useRef() is always null. We were using the ref to focus the date picker when a user clicked the label.

I've created demo using CodeSandbox that reproduces the issue https://codesandbox.io/s/react-date-picker-useref-demo-lmkhjz?file=/src/App.js

You can see in the demo by looking at the console that react is throwing a warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Steps to reproduce

1. Go to https://codesandbox.io/s/react-date-picker-useref-demo-lmkhjz?file=/src/App.js
2. Open console
3. See Warning
4. Click on the label above the date picker
5. In console see ref.current is null

Expected behavior

ref.current is a reference to a dom node and React doesn't throw warning

Actual behavior

ref.current is null, react throws warning

Additional information

No response

Environment

• Browser (if applicable): Firefox, Chrome
• React-Date-Picker version: 10.2.0
• React version: 18.2.0

[wojtekmaj]

Ref was never documented and (even sudden) lack of it can't be considered a bug. What is your use case? Focusing input?

[frederickf]

Thanks for the quick response. We create a label for the date picker, and when a user clicks on the label we were using ref to focus on the first input.

I also have a new use I was intending to use it for, which is exposing some details about an invalid change. For example, getting the field that is invalid and it's current invalid value so I can provide a more detailed error message to the user.

I'd be happy to do a PR for those if you think they are valid use cases. Either by adding support for ref, or something different.

[wojtekmaj]

ref is a bad idea for a name here; it should either be a reference to component itself, or to a root (and usually the only, because it's for a simple cases like Button component) element rendered by this component.

But firstInputRef sounds really handy!

[frederickf]

I'm a little confused. What does "ref is a bad idea for a name here" mean? What name? And if think using ref is a bad idea, then what would firstInputRef be? I'm fine with whatever you prefer, I'm just trying to understand what you're proposing.

UPDATE I reread your comment and I think I understand now. You're saying to use a new property named firstInputRef that takes a ref that is assigned to the first input. EX

const inputRef = useRef()

<DatePicker firstInputRef={inputRef} />

Is that right?

[wojtekmaj]

Yep that's right! Sorry if I failed to explain it clearly.

[frederickf]

I've opened a PR based on our discussion https://github.com/wojtekmaj/react-date-picker/pull/625

[abaksha-sc]

But firstInputRef sounds really handy!

It's better and easier just to provide prop like firstInputId to make possible to associate the label with the first input.

<label for="date-picker">Date:</label>
<DatePicker firstInputId="date-picker" />

It will be similar to prop inputId of popular "react-select".

But I was also looking for some ref prop to add tabIndex="-1" to the button with calendar icon to prevent focus when user navigates on form with keyboard. So some global ref will be useful for me to execute ref.querySelector(button)

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.