# Multicanvas Render in React, Camera Keyboard Inputs not working on engine.InputTarget change **URL:** \ **Category:** Questions\ **Created:** [February 2, 2021, 6:59pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094 "2021-02-02T18:59:18Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [February 2, 2021, 6:59pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/1 "2021-02-02T18:59:19Z")
Hoooookay, this is kinda hard to demonstrate unless you go to here: > **[Pryme8/pane-editor](https://github.com/Pryme8/pane-editor)** > > Contribute to Pryme8/pane-editor development by creating an account on GitHub. and do a local deploy of the editor. Basically I can get the camera to see the mouse inputs but not the keyboard after the inputTarget is changed. > is where the engine.inputTarget is changed. And then this is where the input is bond when the react component mounts for the first time. > Just ignore everything else about DynamicGrass. If this is too much for people to understand, I can prolly make an easier component to deal with. But its going to be hard to test it outside of this React context, so anyone that takes the extra time to take a look I would much appreciate it. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [February 3, 2021, 4:24pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/2 "2021-02-03T16:24:42Z")
Nobody else is interested in multicanvas input support and react? 😭 No one even clicked the link but me!!! Savage… \ **Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [February 3, 2021, 6:42pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/3 "2021-02-03T18:42:11Z") haha man! I’m with you…It happens to me a lot as well 🙂 ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [February 5, 2021, 6:00pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/4 "2021-02-05T18:00:59Z")
Bumpidy bump bump the bump bump bumped thread. If someone is even willing to do a quick deploy of this on their local and take a look for a hour or two I to give me some advice or possibly fix it. I would gladly provide some compensation for your time seeing how this is kind of a lot to digest (just PM me before hand so we can agree to something). Kinda doing this to understand the connection between react and webGL/BJS and how different methods can be deployed. I was able to do this with whole system already with Functional Components but it was not as efficient for the complex state management. Anyways I’m rambling… yeah someone come save me please. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [February 9, 2021, 4:16pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/5 "2021-02-09T16:16:54Z")
aaaand bump… come on… someone has to have some sort of suggestion of something to try. Guess nobody wants to make any $$$… ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [March 12, 2021, 5:35pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/6 "2021-03-12T17:35:45Z")
Hooookay, sense there where not takers on this I decided to make a really simplified version of the same problem. > **[upbeat-water-z4wjl - CodeSandbox](https://codesandbox.io/s/upbeat-water-z4wjl?file=%2Fsrc%2FGameSystem%2FGameSystem.tsx)** > > upbeat-water-z4wjl by pryme8 using @babel/runtime, @babylonjs/core, @material-ui/core, classnames, react, react-dom, react-scripts Could someone please help me figure out how to get the keyboard inputs working here? Line 56 of GameSystem.tsx is where the new canvas is attached when the react layer is ready. The mouse works, but I can not for the life of me get the keyboard to work. I have tried a ton of different ways, this only happens with a react setup. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 12, 2021, 7:02pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/7 "2021-03-12T19:02:51Z")
So this is a shoot in the dark but can you try to set your canvas.style.tabIndex = 1 (same with zIndex) ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [March 12, 2021, 7:16pm UTC](https://forum.babylonjs.com/t/multicanvas-render-in-react-camera-keyboard-inputs-not-working-on-engine-inputtarget-change/18094/8 "2021-03-12T19:16:59Z")
☹ nope… hmm, honestly I’m pretty stumped by this.