Can't select all list items with Shift + up arrow without selecting previous block

[jeremyfelt]

Describe the bug

In WordPress 5.0, given a list of at least 4 items in a list block, if I try to select all of those items with CMD + Shift + Left arrow and then Shift + Up arrow, all of the items except for the first can be selected as expected. As soon as I type Shift + Up arrow for the last item, the selection skips and becomes a multi-block selection.

To Reproduce
Steps to reproduce the behavior:

1. Add a paragraph block
2. Add a list block
3. Type 4 or more list items
4. Place cursor at the end of the last list item
5. Type CMD + Shift + Left arrow (OSX) to select all text in the last item
6. Type Shift + Up arrow to add the above list item to the selection
7. Repeat

Expected behavior

I expect to be able to select each list item in the block so that I can copy/cut or otherwise manipulate the text.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS 10.12.6
• Browser: Chrome
• Version: 70.0.3538.110

[jeremyfelt]

I've updated the original ticket description—this appears to only happen with 4 or more list items. In a list of 3 items, I'm able to select as expected.

Also: Using CMD + Shift + Up arrow when the cursor is at the end of the last item does work as expected and selects all text at once.

[afercia]

@jeremyfelt is this similar to #12322 ? Seems to me the same thing happens also on paragraphs, with the same caveat: it's triggered with 4 or more lines of text.

[jeremyfelt]

@afercia It seems like it. I have the same issue with paragraphs. I can imagine it's the same area of code that's responsible. Should we close this one as a duplicate?

[afercia]

Probably yes, I'd leave that to the Gutenteam though. For now, I'd remove the "Needs testing" label 🙂

[aduth]

Expect that the issue lies within the calculation of the vertical edge being traversed:

gutenberg/packages/editor/src/components/writing-flow/index.js

Line 294 in e969954

} else if ( isVertical && isVerticalEdge( target, isReverse ) ) {

gutenberg/packages/dom/src/dom.js

Lines 147 to 190 in e969954

	/**
	* Check whether the selection is vertically at the edge of the container.
	*
	* @param {Element} container Focusable element.
	* @param {boolean} isReverse Set to true to check top, false for bottom.
	*
	* @return {boolean} True if at the edge, false if not.
	*/
	export function isVerticalEdge( container, isReverse ) {
	if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
	return isHorizontalEdge( container, isReverse );
	}
	if ( ! container.isContentEditable ) {
	return true;
	}
	const selection = window.getSelection();
	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
	if ( ! range ) {
	return false;
	}
	const rangeRect = getRectangleFromRange( range );
	if ( ! rangeRect ) {
	return false;
	}
	const buffer = rangeRect.height / 2;
	const editableRect = container.getBoundingClientRect();
	// Too low.
	if ( isReverse && rangeRect.top - buffer > editableRect.top ) {
	return false;
	}
	// Too high.
	if ( ! isReverse && rangeRect.bottom + buffer < editableRect.bottom ) {
	return false;
	}
	return true;
	}

I encounter a similar issue with lists. It's not clear to me whether it's precisely the same:

1. Insert a paragraph with some text
2. Insert a list with a list item
3. Add a new list item
4. Indent the new list item
5. Press Up

Expected: Caret moves to first list item
Actual: Caret moves to preceding paragraph

[ellatrix]

I think this is alleviated by #14448, but it's still an issue only if the last item is less longer than the first item.

[aduth]

@ellatrix Can you clarify? I can no longer reproduce this at all, regardless of whether the first line is longer than the last.

[ellatrix]

@aduth Sorry, I meant: if the last line is longer than the first. :)

[jeremyfelt]

I just tested this in WordPress 5.1 with the Gutenberg 5.4.0 plugin activated and I think it is resolved. I can select the full list of items using the keyboard when the last item is longer or shorter than the first.

I had a similar issue with paragraphs and that is working now as well.

[aduth]

I can still reproduce the issue under the specific condition that the last entry in the list is longer than those preceding it.

[jeremyfelt]

This seems to be resolved in WP 5.3.2 with Gutenberg 7.1.0.

[aduth]

I'm still able to reproduce with the same characteristics as in my previous comment #12656 (comment) .

(macOS 10.15.1, Chrome 79.0.3945.88)