scrollWidth error in DatePicker

[melcherry98]

🐛 Bug Report

I get an error when I use the DatePicker V3 and a TagField V2 inside of the Dialog after closing the dialog:

🤔 Expected Behavior

I shouldn't see an error.

😯 Current Behavior

I get the error below when I use the DatePicker V3 and a TagField V2 inside of the Dialog after closing the dialog:

Reproduction Steps

• Have this kind of structure:

<Dialog>
<TagField>
<DatePicker>
</Dialog>

• Use the DatePicker
• Use the TagField
• Submit

https://user-images.githubusercontent.com/29243259/181639672-ff003d07-81ef-40cd-afa5-0d04b2af6f3e.mov

💁 Possible Solution

Add a null check on this line: https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/datepicker/src/Input.tsx#L42

🔦 Context

This bug is blocking the release of a new feature.

💻 Code Sample

This code sandbox does not reproduce the error, but does give some context. code sandbox

The "Recipients" field is a V2 TagField component in the actual implementation.

🌍 Your Environment

Software	Version(s)
react-spectrum	"3.19.0"
Browser	Chrome
Operating System	MacOS Big Sur

🧢 Your Company/Team

Adobe/Marketo Engage

🕷 Tracking Issue (optional)

[LFDanLu]

Strange that the codesandbox doesn't reproduce the issue, but adding a null check to the line you linked makes sense. Just a fyi: I've removed the JIRA link since we don't wanna expose internal Adobe links in these issues, we should probably get rid of that section from the issue template haha.

[LFDanLu]

@melcherry98 Since we aren't able to reproduce it via a codesandbox, would you mind trying to apply your suggested fix locally just to double check that it resolves the issue? You can do so via patch package or modifying your node_modules locally

[melcherry98]

Sorry it took so long to circle back. Yes, changing that line to if (inputRef && inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth) { does resolve our issue. Thank you for your help!