Răsfoiți Sursa

Esc leaves the search box (#9462)

* feat(shortcuts): Esc leaves the search box

Pressing Esc while focused in the search box now blurs it, so the user can immediately resume navigating articles with the keyboard instead of staying trapped in the input. Closes #5043.

* Add Hellraiser28 to CREDITS.md

* Drop IE11 key handling, make the header search a text input

* Update p/scripts/main.js

Co-authored-by: Inverle <inverle@proton.me>
Philip 1 zi în urmă
părinte
comite
9e87fcfb3e
3 a modificat fișierele cu 13 adăugiri și 1 ștergeri
  1. 1 0
      CREDITS.md
  2. 1 1
      app/layout/header.phtml
  3. 11 0
      p/scripts/main.js

+ 1 - 0
CREDITS.md

@@ -137,6 +137,7 @@ People are sorted by name so please keep this order.
 * [happymacarts](https://github.com/happymacarts): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:happymacarts)
 * [happymacarts](https://github.com/happymacarts): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:happymacarts)
 * [Harshad Hirapara](https://github.com/harshad389): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:harshad389)
 * [Harshad Hirapara](https://github.com/harshad389): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:harshad389)
 * [HawkForge](https://github.com/HawkForge): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:HawkForge)
 * [HawkForge](https://github.com/HawkForge): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:HawkForge)
+* [Hellraiser28](https://github.com/Hellraiser28): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Hellraiser28)
 * [hesch](https://github.com/hesch): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hesch)
 * [hesch](https://github.com/hesch): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hesch)
 * [hilariousperson](https://github.com/hilariousperson): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hilariousperson)
 * [hilariousperson](https://github.com/hilariousperson): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hilariousperson)
 * [Hippolyte Thomas](https://github.com/hippothomas): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hippothomas), [Web](https://hippolyte-thomas.fr/)
 * [Hippolyte Thomas](https://github.com/hippothomas): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:hippothomas), [Web](https://hippolyte-thomas.fr/)

+ 1 - 1
app/layout/header.phtml

@@ -42,7 +42,7 @@
 			<input type="hidden" name="f" value="<?= Minz_Request::paramString('f') ?>" />
 			<input type="hidden" name="f" value="<?= Minz_Request::paramString('f') ?>" />
 			<?php } ?>
 			<?php } ?>
 			<div class="stick">
 			<div class="stick">
-				<input type="search" name="search" id="search"
+				<input type="text" name="search" id="search"
 					value="<?= htmlspecialchars(FreshRSS_Context::$search->toString(), ENT_COMPAT, 'UTF-8') ?>"
 					value="<?= htmlspecialchars(FreshRSS_Context::$search->toString(), ENT_COMPAT, 'UTF-8') ?>"
 					placeholder="<?= _t('gen.menu.search') ?>" />
 					placeholder="<?= _t('gen.menu.search') ?>" />
 				<button class="btn" type="submit"><?= _i('search') ?></button>
 				<button class="btn" type="submit"><?= _i('search') ?></button>

+ 11 - 0
p/scripts/main.js

@@ -1402,6 +1402,17 @@ function init_shortcuts() {
 		if (k === s.toggle_media) { toggle_media(); ev.preventDefault(); }
 		if (k === s.toggle_media) { toggle_media(); ev.preventDefault(); }
 		if (k === s.toggle_aside) { toggle_aside_click(); ev.preventDefault(); }
 		if (k === s.toggle_aside) { toggle_aside_click(); ev.preventDefault(); }
 	});
 	});
+
+	// Unfocus the search input if user presses Esc
+	const searchBox = document.getElementById('search');
+	if (searchBox) {
+		searchBox.addEventListener('keydown', ev => {
+			if (ev.key === 'Escape') {
+				searchBox.blur();
+				ev.preventDefault();
+			}
+		});
+	}
 }
 }
 
 
 function init_stream(stream) {
 function init_stream(stream) {