Focus event firing after a focus inside of a function

I'm using a hidden input to keybind my app with it but without triggering events when i write on other input-fields

-clicks on element {
  -hide element
  -creates an input text-field(to edit the element)
  -focus the input
  - on blur or submit  changes the element and remove the input
 }

but if you add this new event :

 - click anywhere in the container {
   -focus the hidden calculator input (so it can use keybinding)
 }

when user clicks on the element it ends firing the blur event without letting the user edit it first because its activating the second block event. so it's either skipping the focus part of the first block or the focus of the second block is activating after the focus on the first one

I'm maybe using the wrong approach to solving it but I don't know why it's behaving that way.