codesandbox-client
codesandbox-client copied to clipboard
codesandbox
I can't edit the code editor when Chakra-ui Drawer is open
🐛 bug report
Preflight Checklist
- [x] I have read the Contributing Guidelines for this project.
- [x] I agree to follow the Code of Conduct that this project adheres to.
- [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.
Description of the problem
How has this issue affected you? What are you trying to accomplish?
I was working on the chakra-ui drawer example but i realized that i can no longer edit text outside of the the preview area. I created the drawer area and i just set the default props to always be open. And then i noticed this problem.
I tried the fix this problem myself and i was delete the portal element in the preview area on the dev tools and problems is solved at that time. I think this problems may be related to React Portal.
To Reproduce
Link to sandbox: ChakraUI Drawer Example
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | Latest |
| Browser | Version 103.0.5060.53 (Official Build) (64-bit) |
| Operating System | Ubuntu 16.04 LTS |
Hey @nurullah
Thank you for this report, however I'm not sure of the issue here? Opening the example you gave us I can edit any and all text in the Sandbox?
@JamesACS Unfortunately, i still cannot edit the editor when Drawer was open. You can watch my problem in the below;
https://user-images.githubusercontent.com/10761479/176725451-e9f69894-b2d5-40b9-a5ac-02ce68c1e6dd.mp4
Thanks @nurullah and sorry for the delay here, this issue got a little lost.
This is expected behaviour though, as the drawer is taking focus. If you'd like to test the functionality while not losing editor control we'd recommend using the pop out preview.
Thanks @nurullah and sorry for the delay here, this issue got a little lost.
This is expected behaviour though, as the drawer is taking focus. If you'd like to test the functionality while not losing editor control we'd recommend using the pop out preview.
But the problem is that i cannot edit the code anymore.
https://user-images.githubusercontent.com/10761479/198587933-0f0f9f2d-6eba-4af7-9cc6-61d87ac66386.mp4
This still looks like a problem with the Chakra specific behavior, which forces the focus to be moved inside the Drawer. The moment you click in the editor, you can see the cursor disappears.
You are free to close this issue, if it's not problem for you that i can't edit the code anymore.
There's no way for us to control what the content inside the sandbox does. In this case, the Chakra component forces the focus to move on the preview everytime you try to focus in the editor. Not sure what we can do to solve this.