Clicking an HTML button won't update editor's focus state

[htulipe]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

In the linked fiddle I have an editor, a component that display current useFocused value and a simple button. If one clicks inside the editor or anywhere in the page, the focus state is updated. It's not the case when one clicks the button. If the editor was focused, it will still be reported as focused.

Fiddle https://jsfiddle.net/3er0m7nv/6/

Gif

Slate: 0.58.3 Browser: Chrome OS: Mac

What's the expected behavior?

I'd expect the editor "focused" state to be updated when clicking a button.

Thanks

[htulipe]

Note that the button can be inside or outside the Slate component, the bug is still there.

[ls19930101]

It‘s not a bug. you can add event to html button like that: `onMouseDown={e=>{ e.preventDefault(); //do something you want

}}`

[htulipe]

It is a bug in the sense that the editor is reported as focused while it's not. I'm not looking for a way to listen to click event on button, I want the editor focus state to match the reality.

[sebastianseilund]

I have the same issue. Clicking regular elements outside the editor will blur the element on mousedown. Clicking any <button> element sometimes blurs on full click (mousedown is not enough), and some times doesn't blur at all.

The same issue happens for me when programmatically .focus()ing another element or .blur()ing the <Editable/> element itself. CodeSandbox

I'm guessing it has something to do with the way Slate uses the selectionchange event for focus behavior.

[leeran7]

I have the same issue. Clicking regular elements outside the editor will blur the element on mousedown. Clicking any <button> element sometimes blurs on full click (mousedown is not enough), and some times doesn't blur at all.

The same issue happens for me when programmatically .focus()ing another element or .blur()ing the element itself. CodeSandbox

I'm guessing it has something to do with the way Slate uses the selectionchange event for focus behavior.

I got around this by using <div role="button" /> component instead of using <button>