Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: DatePicker appendTo prop blocks arrow key keyboard input

See original GitHub issue

Package

carbon-components-react

Browser

No response

Package version

8.5.0

React version

No response

Description

When the appendTo prop is set on the DatePicker component, the arrow keys do not work.

Reproduction/example

https://codesandbox.io/s/carbon-components-react-forked-2now8x?file=/src/index.js

Steps to reproduce

Load up the code sandbox https://codesandbox.io/s/carbon-components-react-forked-2now8x?file=/src/index.js. Use the arrow keys to navigate through the Radio buttons. When you press the Enter key, the DatePicker component will appear. Notice that the arrow keys no longer work to navigate the Radio buttons.

Code of Conduct

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

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

clouriacommented, Jul 11, 2022

No need to open back up. His comment worked. The documentation on a appendTo was confusing to me at first and I wasn’t aware that it worked that way. Thanks for the explanation.

0reactions

joshblackcommented, Jul 11, 2022

Hey there! Going to close this out due to inactivity. Feel free to respond based on what @tay1orjones responded with above and we can re-open this issue 👍

Top Results From Across the Web

React custom datepicker: Step-by-step - LogRocket Blog

In this article, we'll solve the issue by building a custom React datepicker from scratch using native JavaScript Date objects. Final React ...

left arrow key error in bootstrap-datetimepicker - Stack Overflow

According to this issue on github, that behaviour is caused by the span, in the headTemplateV3 section of the bootstrap-datetimepicker.js file.

element-gui - UNPKG

24, - DateTimePicker ... 119, - Fix prop append-to-body (#16289 by @a631807682) ... 195, - Fix current-row-key and select event bug (#15983 by...

https://raw.githubusercontent.com/artstylecode/fix...

... change event bug (#19200 by @sxzz) - Image - Update error status (#19194 by ... by @ziyoung) - Submenu - Fix prop...

Changelog - Kendo UI for Vue

tooltip targetElement error; targetElement prop error; validatepackage import ... add possibility for all pagaSize option; datepicker opens on enter in form ...