caret behavior odd when click event contain setState

[jiangpingshendd01]

when I want to implement a feature that click the document then disappear a tip modal. I found that the caret will always jump back to previous position when slightly click the editor with macbook's touch pad. Then I found this was cause by the setState call in onClick handler, no matter the handler is attached to Editor or document.body...

here is the sandbox: https://codesandbox.io/s/magical-euclid-p0z3w

Slate: 0.57.1 "slate": "^0.57.1", "slate-react": "^0.57.1"

Browser: Chrome / Safari / Firefox / Edge

OS: Mac

What's the expected behavior?

the caret should where it go when user slightly click the editor. just like the official example: https://www.slatejs.org/examples/richtext

[mpkelly]

Hi @jiangpingshendd01, I think the problem is with your example code which is missing some necessary optimisations. Please see the updated sandbox which I have commented

https://codesandbox.io/s/affectionate-williamson-hdwhw

If this fixes your problem then please close this issue.

[bartzy]

I encountered this issue as well - calling the set method of a useState hook inside onClick causes this caret behavior. Seems like the

@mpkelly: I think your solution is only hiding the problem - you added useCallback for the updateMystate callback, but the myState variable is not in its dependency list, so setMystate(myState + 1) is not re-rendering because the value of myState is always the same.

[bartzy]

Update: I can confirm that this bug has been fixed by https://github.com/ianstormtaylor/slate/pull/3355 which was already merged to master.

[sherwinyu]

@bartzy , out of curiosity, how did you pull in the changes from #3355? I have a bug that I think should be fixed by the change as well, but I can't figure out how to specify the dependency in package.json (and the latest slate release is 0.57.1 from December).

I've tried adding things like "slate": "https://github.com/ianstormtaylor/slate#16ff44d0566889a843a346215d3fb7621fc0ed8c" to package.json, but it's not registering (I assume github.com/ianstormtaylor/slate actually contains 4 packages: slate, slate-react, etc)

[mpkelly]

@sherwinyu you should fork this slate Github repo and then build it yourself. You can then map your node packages to your local build.

[bartzy]

@sherwinyu I forked the slate repo, cloned it locally and used gitpkg (https://github.com/ramasilveyra/gitpkg) to use my own repo for releases: 1.yarn install

2. You need to build slate for release: NODE_ENV=production yarn build:rollup && yarn test && yarn lint
3. Publish each package you need: cd packages/slate; gitpkg publish
4. Install the packages: npm install github:your-gh-user/your-slate-repo#slate-v0.57.1-gitpkg (or yarn)