Merge pull request #297 from ilya-pevzner/on-resize

A small fix for list item selection/click interaction

frontend/code/components/listItems.ts

@@ -19,6 +19,7 @@ export abstract class SelectableListItemComponent<
 > extends ComponentBase<S> {
     protected pressToSelectButton: PressableElement;
     protected listView: ListViewComponent | null = null;
+    private _isSelectable: boolean = false;
 
     constructor(
         id: ComponentId,
@@ -50,17 +51,20 @@ export abstract class SelectableListItemComponent<
         }
     }
 
+    onPress(event: PointerEvent | KeyboardEvent): void {
+        if (this.listView !== null) {
+            this.listView.onItemPress(this, event);
+        }
+    }
+    get isSelectable(): boolean {
+        return this._isSelectable;
+    }
     set isSelectable(isSelectable: boolean) {
+        this._isSelectable = isSelectable;
         if (isSelectable) {
             this.element.classList.add("rio-selectable-item");
 
-            this.pressToSelectButton.onPress = (
-                event: PointerEvent | KeyboardEvent
-            ) => {
-                if (this.listView !== null) {
-                    this.listView.onItemPress(this, event);
-                }
-            };
+            this.pressToSelectButton.onPress = this.onPress;
         } else {
             this.element.classList.remove("rio-selectable-item");
             this.pressToSelectButton.onPress = null;
@@ -168,14 +172,17 @@ export class CustomListItemComponent extends SelectableListItemComponent<CustomL
                 this.element.style.removeProperty("cursor");
                 this.element.style.setProperty("--hover-color", "transparent");
 
-                this.element.onclick = null;
+                if (!this.isSelectable) this.element.onclick = null;
             }
         }
     }
 
-    private onPress(): void {
-        this.sendMessageToBackend({
-            type: "press",
-        });
+    onPress(event: PointerEvent | KeyboardEvent): void {
+        if (this.isSelectable) super.onPress(event);
+        if (event instanceof PointerEvent && this.state.pressable) {
+            this.sendMessageToBackend({
+                type: "press",
+            });
+        }
     }
 }

tests/test_frontend/test_list.py

@@ -0,0 +1,43 @@
+import asyncio
+
+import rio.testing
+
+
+async def test_list() -> None:
+    pressed = []
+
+    def on_press():
+        pressed.append(1)
+
+    async with rio.testing.BrowserClient(
+        lambda: rio.ListView(
+            rio.SimpleListItem("Item", key="item0", on_press=on_press),
+            selection_mode="single",
+        )
+    ) as test_client:
+        await asyncio.sleep(0.5)
+
+        await test_client.click(10, 1)
+        await asyncio.sleep(0.5)
+
+        list_view = test_client.get_component(rio.ListView)
+        item = test_client.get_component(rio.SimpleListItem)
+        assert len(pressed) == 1
+        assert list_view.selected_items == [item.key]
+
+        list_view.selection_mode = "none"
+        list_view.selected_items = []
+        item.on_press = None
+        await test_client.wait_for_refresh()
+
+        await test_client.click(10, 1)
+        assert len(pressed) == 1
+        assert list_view.selected_items == []
+
+        list_view.selection_mode = "single"
+        item.on_press = on_press
+        await test_client.wait_for_refresh()
+
+        await test_client.click(10, 1)
+        assert len(pressed) == 2
+        assert list_view.selected_items == [item.key]