From f62709a8a3bead7705b956b6e8562852a623a8bc Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Sun, 9 Jun 2024 21:33:07 +0300
Subject: [PATCH] Data views: set initial selection

---
 src/sidebar.jsx | 13 ++++++++++++-
 src/style.css   |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/sidebar.jsx b/src/sidebar.jsx
index 6a16f51..3f3c409 100644
--- a/src/sidebar.jsx
+++ b/src/sidebar.jsx
@@ -1,6 +1,6 @@
 import { DataViews } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { getTitleFromBlocks } from './read-write';
 
 function Title({ item: { path, blocks } }) {
@@ -31,6 +31,17 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 		);
 	}
 
+	// Temporary hack until we can control selection in data views.
+	useEffect(() => {
+		const button = document.getElementById('view-list-0-' + currentId);
+
+		if (button?.getAttribute('aria-pressed') === 'false') {
+			const { activeElement } = document;
+			button.click();
+			activeElement.focus();
+		}
+	}, [currentId]);
+
 	return (
 		<DataViews
 			data={items}
diff --git a/src/style.css b/src/style.css
index ac2c5a2..85fbe8b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -106,6 +106,7 @@ ul.dataviews-view-list li {
 #select .components-toolbar {
   border-color: #e0e0e0;
   border-width: 0 1px 0 0;
+  background-color: transparent;
 }
 
 #editor > div {