فهرست منبع

Fix feed dropdown bugs due to hash desync (#8949)

Fixes regression caused by https://github.com/FreshRSS/FreshRSS/pull/8335
To reproduce it, open any dropdown in the aside, reload the page, and try to open the same dropdown - it will disappear

To explain the issue more clearly, the dropdown menu wouldn't show because earlier its opacity is set to 0%, and after clicking the same dropdown after a page reload, the hashchange event wouldn't trigger to restore the previous opacity, and also the second listener would trigger to remove the dropdown if you opened it again.

Maybe https://github.com/FreshRSS/FreshRSS/issues/6156 is relevant here

Also a CSS change to stop showing the dropdown toggle icon of the previously opened dropdown after a page reload while the dropdown was open.
Inverle 1 روز پیش
والد
کامیت
6984c22b5c
3فایلهای تغییر یافته به همراه11 افزوده شده و 4 حذف شده
  1. 9 2
      p/scripts/main.js
  2. 1 1
      p/themes/base-theme/frss.css
  3. 1 1
      p/themes/base-theme/frss.rtl.css

+ 9 - 2
p/scripts/main.js

@@ -1171,11 +1171,18 @@ function init_column_categories() {
 				// Wait for dropdown to be closed so it can be removed
 				// Dropdown visibility is based on CSS :target
 				window.addEventListener('hashchange', () => {
-					dropdownMenu?.nextElementSibling?.remove(); // dropdown close
-					dropdownMenu?.remove();
+					dropdownMenu.nextElementSibling.remove(); // .dropdown-close
+					dropdownMenu.remove();
 				}, { once: true });
 			}, { once: true });
 
+			if (location.hash === a.getAttribute('href')) {
+				// Forcefully trigger the hashchange event listener above in order to show the dropdown
+				// This is needed because the same hash remained from a previous page load
+				// or due to use of back/forward buttons
+				window.dispatchEvent(new Event('hashchange'));
+			}
+
 			return true;
 		}
 

+ 1 - 1
p/themes/base-theme/frss.css

@@ -1416,7 +1416,7 @@ input[type="search"] {
 	width: 2.25rem;
 }
 
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item .dropdown:has(.dropdown-menu) .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
 	visibility: visible;

+ 1 - 1
p/themes/base-theme/frss.rtl.css

@@ -1416,7 +1416,7 @@ input[type="search"] {
 	width: 2.25rem;
 }
 
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item .dropdown:has(.dropdown-menu) .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
 	visibility: visible;