Multi select flickering in Chrome 59

[notnownikki]

Issue Overview

In certain circumstances in Chrome 59, it's possible to have multiple blocks selected, and a single block have focus at the same time.

Steps to Reproduce (for bugs)

1. Create three text blocks, with the text "top", "middle", and "bottom".
2. In the bottom block, place the text cursor at the end of the word "bottom".
3. Drag to the beginning of the word "bottom" to select it.
4. Release the mouse button.
5. Move the mouse cursor to the end of the word "bottom".
6. Drag straight upward to select all three blocks.
7. Drag the mouse cursor to the beginning of the word "top" in the top block.
8. Drag the mouse cursor straight down to the bottom block so it is at the beginning of the word "bottom".
   You should see the word "bottom" is no longer selected, and the text cursor is at the start of the word "bottom".
9. Continue dragging upward to select all three blocks. You'll see when the cursor is not moving, the blocks are selected, but when you're dragging, there is flicker and the block you're over is hovered, and the original block as focus.

At first glance, this seems to be caused by the blockSelection state having different start and end blocks, and a focused block at the same time. I can only reproduce this in Chrome 59.

Expected Behavior

It should not be possible to have multiple blocks selected, and a focused block at the same time.

Todos

• Tests

[notnownikki]

I've kinda tracked down what's going on here, but need someone who knows more about how multi-select should behave to jump in and clarify some things here :)

The blockSelection state looks like this:

  blockSelection: {
    start: '1e8b5f1a-021d-476b-81b8-b2c3cf33abc4',
    end: '1e8fe2d5-3c6c-4218-b963-83fd099cf70d',
    focus: null
  },

Then when the mouse moves, we get an UPDATE_FOCUS action, which gives us:

  blockSelection: {
    start: '1e8b5f1a-021d-476b-81b8-b2c3cf33abc4',
    end: '1e8b5f1a-021d-476b-81b8-b2c3cf33abc4',
    focus: {}
  },

which is focusing just one block, then we get SELECT_BLOCK, which doesn't change anything, but then we get another two UPDATE_FOCUS, the first of which changes nothing, the second of which gives us:

  blockSelection: {
    start: '1e8b5f1a-021d-476b-81b8-b2c3cf33abc4',
    end: '1e8b5f1a-021d-476b-81b8-b2c3cf33abc4',
    focus: {
      collapsed: true
    }
  },

and that's when the multi-select flickers to show the focus just on one block (I think?)

Then we get another TOGGLE_BLOCK_HOVERED as the mouse moves, and the cycle starts again with a MULTI_SELECT.

[notnownikki]

Calling @iseulde for her expertise here!

[notnownikki]

My initial look at the code (which I'm not too familiar with) seems to point at this: https://github.com/WordPress/gutenberg/blob/master/editor/state.js#L392

That looks to me like it could cause problems if the multi select and toggle block hovered actions arrive in an order we're not expecting? Like, we could have set the state to have selected multiple blocks, but also be hovering blocks in a way that displays their tools etc. at the same time

[notnownikki]

Well, as my chrome just updated to 60, and this was a difficult to reproduce bug that didn't stop things actually working anyway, I'm going to close this.