Clicking on button which de-renders causes custom editor to lose focus


#1

So I am part of a group attempting to create a custom view/editor for atom, and I am running into a problem where if we click on a button that is conditionally rendered, (clicking on it replaces itself with another element), the view/editor will lose focus (this can be seen by the bright blue bar next to the tab name going grey upon clicking the button) which causes atom to not register any custom commands because it registers it as not active anymore. This feels like a bug, and I have attempted to use onMouseDown and e.preventDefault() but to no avail. Am I missing anything obvious?

The button code is generally plain, onClick stops propagation and calls a callback “set” which causes a value to shift that makes it be replaced by something else.

<button
    onClick={e => {
      e.stopPropagation()
      set(value === "" ? generateGUID() : value)
    }}
    onMouseDown={e=>{
      e.preventDefault()
    }}
    style={{ verticalAlign: "middle", fontSize: fontSize - 3 }}
  >

Thanks for any advice you can give!


#2

You might need to store the active editor and manually re-activate it once the DOM change has been performed.

Browsers have a built-in concept of element focus, and since Atom doesn’t try to reinvent any wheels, it uses Chrome’s focus feature instead of rolling its own. As I understand it, anything you change in the DOM that causes a focus change (or disappearing a focused element, which should revert focus to the body) will affect Atom’s focus.


#3

Alright, I was able to fix my problem by somewhere under the button’s onClick or onMouseDown, calling focus on an element in the document, the reason why this wasn’t working for me before was because I was attempting to focus on a div or something that wasn’t allowed to be focused normally, so all I had to do was add a “tabIndex” to the div and it will then accept the focus when called. Thank you for your help and advice!


#4

No problem. :slight_smile: