[ annotation api] Adding annotation after the user has stopped typing causes focus to jump to line with annotation on.

[con322]

Describe the bug
Adding annotation after the user has stopped typing causes focus to jump to line with annotation on.
Video of issue: http://bigbite.im/99mtOY

To reproduce
After adding the below code you can reproduce the issue by doing the below:

1. type 'test' hit enter (paragraph block 1)
2. type 'test' hit enter (paragraph block 2)
3. type 'test' hit enter (paragraph block 3)
4. save and refresh page
5. click within the second paragraph end of test word and add a space then move cursor over another block for example hover over paragraph block 1 (do not click anywhere).
6. you should now see paragraph two block has the annotation
7. click within the third paragraph end of test word and add a space then move cursor over another block for example hover over paragraph block 1 (do not click anywhere) you'll notice the focus jumps to the line with the annotation on.

Below is a stripped down version of my code:

Highlight component file

const { withSelect } = wp.data;
const { Component } = wp.element;
const { compose } = wp.compose;

class Highlight extends Component {
  componentDidUpdate(prevProps) {
    const { isTyping } = this.props;

    if (!isTyping && prevProps.isTyping) {
      wp.data.dispatch('core/annotations').__experimentalAddAnnotation({
        source: 'my-annotations-plugin',
        blockClientId: wp.data.select('core/editor').getBlocks()[1].innerBlocks[1].clientId <<< change this so it gets the second paragraph block >>>,
        richTextIdentifier: 'content',
        range: {
          start: 0,
          end: 3,
        },
      });
    }
  }

  render() {
    return null;
  }
}

const applyWithSelect = withSelect((select) => {
  console.log('eslint');

  return {
    isTyping: select('core/editor').isTyping(),
  };
});

export default compose(
  applyWithSelect,
)(Highlight);

Register highlight plugin file

import Highlight from './Highlight';
const { registerPlugin } = wp.plugins;

registerPlugin('highlight', {
  render: Highlight,
  icon: 'admin-links',
});

Expected behavior
Adding annotations shouldn't cause the focus to jump to the piece of text where the annotation format has been applied.

Desktop (please complete the following information):
OS: macOS Mojave
Browser: Chrome
Version: 73.0.3683.103 (Official Build) (64-bit)

[jorgefilipecosta]

Hi @con322 thank you for reporting this issue.

I tried to replicate the problem in the last version of Gutenberg plugin using the following code (based on the code you provided) https://gist.github.com/jorgefilipecosta/e199d6b3659936fc76535545b082a869 (it adds an annotation randomly in one of the first 4 blocks when the user stops typing), and the focus was never lost. I guess given the number of changes applied to rich text component this bug may have been solved meanwhile. If the problem is persisting in your tests on the last version of Gutenberg feel free to reopen the issue.

[con322]

Hi @jorgefilipecosta thanks for taking a look.

Unfortunately the issue is still present (http://bigbite.im/DCDIph).

I used your exact code for the demo in the link above however changed it so that it always highlighted text within the second block, as you can see if you have three separate paragraphs (i added a space to the end of each word, save, refresh remove space from second paragraph then move cursor about so a word is highlighted and then remove space from third paragraph and move cursor about you'll see cursor/focus jumps).

I tried with Wordpress 5.1.1 and also tried installing the latest version of the Gutenberg plugin 5.5.0 and issue was present both times.

Thanks

[con322]

Hi @jorgefilipecosta

Could you re-open the issue as I don't seem to have the privileges to do so.

Thanks