search

ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
30.01k stars 3.26k forks source link

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

Open htulipe opened 4 years ago

htulipe commented 4 years ago

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 2020-09-28 15 15 37

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 commented 4 years ago

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

ls19930101 commented 4 years ago

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

}}`

htulipe commented 4 years ago

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 commented 4 years ago

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.

leeran7 commented 7 months ago

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>