javascript - focus() not working with input -

i'm building component in angular have html canvas , when click on need place input element on canvas user can write text , press enter, , text copied canvas.

so kind of works @ moment wanted when user clicks in canvas, @ same time input placed in canvas, focus set on it, user can write instead of having click on input again.

i reduced problem minimum, have simple canvas , input element, , when click on canvas want set focus on input, not work. can me out?

i have fiddle, , js

const canvas = document.queryselector('#my-canvas');  canvas.addeventlistener('mousedown', (e) => {   const input = document.queryselector('.canvas__input');   console.log(input);   input.focus(); }); 

according mdn doc:

if call htmlelement.focus() mousedown event handler, must call event.preventdefault() keep focus leaving htmlelement.

so please try this:

const canvas = document.queryselector('#my-canvas');  canvas.addeventlistener('mousedown', (e) => {   e.preventdefault();   const input = document.queryselector('.canvas__input');   console.log(input);   input.focus(); });