question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onInput loose selection and inserting in random place

See original GitHub issue

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

report a bug

What’s the current behavior?

using browser spell check on rich text example on a text that has mark on chrome seems to loose selection and inserting the text on weird place. there are two behaviours on this depending on where it is performed.

  • text got replaced(looks like its correct) but it is not inside a span and when you try to delete it, it will break Text outside span
  • possibly related to the first one as well and as it loose the selection when it should technically have a mark, it encounters https://github.com/ianstormtaylor/slate/issues/1271 cannot read mark of undefined

tested on safari and it works fine. on Safari it doesn’t seem to run onInput and that seems to be the problem.

Upon debugging it, it goes to onInput on chrome and returning after this line const point = findPoint(anchorNode, anchorOffset, state) because point is null

What’s the expected behavior?

text got replaced while preserving current active marks

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (15 by maintainers)

github_iconTop GitHub Comments

1reaction
zhujinxuancommented, Mar 8, 2018

It seems DraftJs’s solution about it is to reset nodeValue… https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnInput.js

Too complex, I give up. lol

1reaction
zhujinxuancommented, Mar 8, 2018

I find the reason; but I am not sure how to solve it in a neat way: https://stackoverflow.com/questions/32298064/preventdefault-not-working-in-on-input-function

preventDefault is not working with input events

Read more comments on GitHub >

github_iconTop Results From Across the Web

In React ES6, why does the input field lose focus after typing a ...
Every time your state/prop change, the function returns a new form. it caused you to lose focus. Try putting what's inside the function...
Read more >
onfocusout Event - W3Schools
The onfocusout event occurs when an element looses focus. The onfocusout event is often used on input fields. The onfocosout event is often...
Read more >
JavaScript and jQuery by Examples
It is very difficult to debug JavaScript codes due to its loose syntax. ... to add or remove a value from class attribute...
Read more >
Handling Events :: Eloquent JavaScript
The addEventListener method allows you to add any number of handlers so that it is safe to add handlers even if there is...
Read more >
APCS Midterm Flashcards - Quizlet
The student who was selected in the previous step is assigned 0. All other students are reassigned a unique integer from 1 to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found