Focus on the rename text area when it becomes visible

js/main.js

@@ -397,3 +397,31 @@ function updateDocumentWidth() {
 
 updateDocumentWidth();
 window.addEventListener("resize", updateDocumentWidth);
+
+//------------------------------------------------
+// Focus on the rename text area when it becomes visible
+//------------------------------------------------
+const renameTextArea = document.getElementById('rename-row').querySelector('textarea');
+
+function respondToVisibility(element, callback) {
+  var options = {
+    root: document.documentElement,
+  };
+
+  var observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      callback(entry.intersectionRatio > 0);
+    });
+  }, options);
+
+  observer.observe(element);
+}
+
+
+function handleVisibilityChange(isVisible) {
+  if (isVisible) {
+    renameTextArea.focus();
+  }
+}
+
+respondToVisibility(renameTextArea, handleVisibilityChange);