I have a div contenteditable parent node and onclick a paragraph child node is added as the first element child of the div. I am faced with difficulties to transfer the cursor from the div contenteditable parent node to the newly created paragraph child node so that when a user writes a text it is written onto the paragraph node.

This is the parent node

   <div :ref="(el: HTMLDivElement) => { editorContainerRef = el; }" contenteditable>
   </div>

And (editorContainerRef.value as HTMLDivElement) is the reference to parent node (VueJS)

Here I am adding the child node onClick event

const newParagraph = document.createElement('p');
newParagraph.className='d-block paragraph';
newParagraph.setAttribute('contenteditable', 'true');
newParagraph.innerText = '';
(editorContainerRef.value as HTMLDivElement).appendChild(newParagraph);

I have tried clicking the paragraph node programatically and also focused on the element with hope that the cursor will be transferred to the the paragraph node but it doesn’t work as expected

((editorContainerRef.value as HTMLDivElement)?.firstElementChild as HTMLParagraphElement).focus();
((editorContainerRef.value as HTMLDivElement)?.firstElementChild as HTMLParagraphElement).click();

Please I need help on how to solve this problem.