Don't select child of selected shape on right click (#4034)

fixes #4033 

### Change Type


<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes


### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.

apps/dotcom/src/utils/remote-sync/ClientWebSocketAdapter.test.ts

@@ -69,7 +69,7 @@ describe(ClientWebSocketAdapter, () => {
 		// transitioned to OPEN yet, thus the second waitFor
 		await waitFor(() => connectedServerSocket.readyState === WebSocket.OPEN)
 		expect(adapter._ws).not.toBe(prevClientSocket)
-		expect(adapter._ws?.readyState).toBe(WebSocket.OPEN)
+		await waitFor(() => adapter._ws?.readyState === WebSocket.OPEN)
 	})
 	it('should transition to online if a retry succeeds', async () => {
 		adapter._ws?.onerror?.({} as any)

packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -398,7 +398,12 @@ export class Idle extends StateNode {
 					(parent) => !selectedShapeIds.includes(parent.id)
 				)
 
-				if (!selectedShapeIds.includes(targetShape.id)) {
+				if (
+					!selectedShapeIds.includes(targetShape.id) &&
+					!this.editor.findShapeAncestor(targetShape, (shape) =>
+						selectedShapeIds.includes(shape.id)
+					)
+				) {
 					this.editor.mark('selecting shape')
 					this.editor.setSelectedShapes([targetShape.id])
 				}

packages/tldraw/src/test/SelectTool.test.ts

@@ -539,3 +539,20 @@ it('goes into pointing canvas', () => {
 		.pointerDown(300, 300)
 		.expectToBeIn('select.pointing_canvas')
 })
+
+test('right clicking a shape inside of a group does not focus the group if the group is selected', () => {
+	const boxAId = createShapeId()
+	const boxBId = createShapeId()
+	editor.createShapes([
+		{ id: boxAId, type: 'geo', x: 100, y: 100 },
+		{ id: boxBId, type: 'geo', x: 200, y: 200 },
+	])
+	editor.groupShapes([boxAId, boxBId])
+	const groupId = editor.getOnlySelectedShapeId()
+	editor.pointerDown(100, 100, { target: 'shape', button: 2, shape: editor.getShape(boxAId)! })
+	editor.pointerUp(100, 100, { target: 'shape', button: 2, shape: editor.getShape(boxAId)! })
+	expect(editor.getFocusedGroupId()).toBe(editor.getCurrentPageId())
+	editor.pointerDown(100, 100, { target: 'shape', button: 0, shape: editor.getShape(boxAId)! })
+	editor.pointerUp(100, 100, { target: 'shape', button: 0, shape: editor.getShape(boxAId)! })
+	expect(editor.getFocusedGroupId()).toBe(groupId)
+})

packages/tldraw/src/test/groups.test.ts

@@ -938,13 +938,15 @@ describe('the select tool', () => {
 		editor
 			.pointerDown(0, 0, { target: 'shape', shape: boxA, button: 2 })
 			.pointerUp(0, 0, { button: 2 })
-		expect(onlySelectedId()).toBe(groupAId)
+		expect(onlySelectedId()).toBe(groupCId)
+		expect(editor.getFocusedGroupId()).toBe(editor.getCurrentPageId())
+		editor.select(groupAId)
 		expect(editor.getFocusedGroupId()).toBe(groupCId)
 		editor
 			.pointerDown(0, 0, { target: 'shape', shape: boxA, button: 2 })
 			.pointerUp(0, 0, { button: 2 })
-		expect(onlySelectedId()).toBe(ids.boxA)
-		expect(editor.getFocusedGroupId()).toBe(groupAId)
+		expect(onlySelectedId()).toBe(groupAId)
+		expect(editor.getFocusedGroupId()).toBe(groupCId)
 	})
 
 	it('should allow to shift-select other shapes outside of the current focus layer', () => {