[Bug]: Using appendTo with DatePicker causes carriage returns to not work in sibling textarea

[kglickman]

Package

carbon-components-react

Browser

Chrome

Package version

7.57.1

React version

16.14.0

Description

Some time ago, I reported an issue that when the calendar popup was open, it didn't scroll with the input field. #4158. The appendTo prop had been broken, and when it was fixed, I set it to the immediate child of the scroll element per the suggestion given for #4818.

At some point later, we realized that the TextArea that was in the same "appendTo" as the DatePicker was getting it's carriage returns swallowed by flatpickr. Flatpickr had a PR that at first looked like it might fix it flatpickr/flatpickr#2054 but it has since been merged and it doesn't help.

I started to write a defect against Flatpickr but found that I couldn't reproduce the scrolling issue when there's no appendTo, and it doesn't have the carriage return issue when the appendTo is set to a child of the scroll container.

Note that my teammate wrote a similar issue here. #11640 However, I think this is a more straight-forward use case.

Reproduction/example

https://9qiwkg.csb.app/

Steps to reproduce

Put your cursor in the text area field and hit Enter. The cursor does not move to the next line.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[joshblack]

Hi @kglickman! 👋 Thanks for taking the time to make this issue with a super helpful codesandbox 🙏 Could you share more about your use-case for appending to an element in this way? If I remember right, appendTo is generally meant to be an empty element that flatpickr can sit in and isn't intended to have other children elements.

In the interim, setting appendTo to an element without any children should work. Let me know if I'm misunderstanding anything!

[kglickman]

I thought I remembered from the original scrolling issue that it had to be appended to the scroll container. I just tried appending it to an empty div underneath the DatePicker and it works fine. Thanks!

[tw15egan]

Awesome! Going to close this as resolved, but let me know if there are any other questions you have