Last instance steals focus when multiple instances are present

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

Bug

What’s the current behavior?

In my use case, I have two instances present, one for making edits, and another for previewing the result.

When multiple instances are present, and you make edits to any instance but the last in the DOM, the last instance steals focus. It then becomes impossible to focus any instance but the last.

I know this issue was fixed before, but perhaps it resurfaced post-0.50.0.

Codesandbox: https://codesandbox.io/s/spike-slate-u8zpz

Slate: 0.57.1 Browser: Chrome OS: Mac

What’s the expected behavior?

When multiple instances are present, the user should be able to interact and edit an instance without another instance stealing focus.

Are there any potential workarounds?

In my use case, I only require one instance to be editable, so ensuring that this instance is last in the DOM is working for me.

[jagaapple]

As @CameronAckermanSEL said, to refer the same value occurs this bug. In my case, I need two or more editor components that don’t need shared texts, but they refer the same value as an initial value for useState like the following.

const initialValue = [{ type: "paragraph", children: [{ text: "" }] }];

const Component = () => {
  const editor = React.useMemo(() => withReact(createEditor()), []);
  const [value, setValue] = React.useState(initialValue);
  ...
};

In the above codes, initialValue is an object and the same objects have the same addresses in JavaScript, so I got this bugs. useState can accept a function which returns an initial value, I can give a function to it in order to prevent this bug.

https://codesandbox.io/s/slate-focus-bugs-8tsgy

In other cases, some custom plugins for Slate.js have an expensive process, so I made it to be memoized, but memoization shares the same value between caches. In the end, I stopped using memoization for these plugins.

[Haaxor1689]

We have a bit different issue. Again 2 different instances of editor but the problem is that when clicking focus directly from one to another both seem to loose focus.