Skip to content

Commit 7deb9c3

Browse files
authored
fix(searchBox): handle BFCache browsers (#1212)
When the page is coming from BFCache (https://developer.mozilla.org/en-US/docs/Working_with_BFCache) then we force the input value to be the current query. Otherwise, this happens: - `<input>` autocomplete = off (default) - search $query - navigate away - use back button - input query is empty (because `<input>` autocomplete = off) Firefox and Safari are using BFCache for instant back button
1 parent 86872eb commit 7deb9c3

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

src/widgets/search-box/search-box.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,19 @@ function searchBox({
238238
input.value = fullState.query || '';
239239
});
240240

241+
// When the page is coming from BFCache
242+
// (https://developer.mozilla.org/en-US/docs/Working_with_BFCache)
243+
// then we force the input value to be the current query
244+
// Otherwise, this happens:
245+
// - <input> autocomplete = off (default)
246+
// - search $query
247+
// - navigate away
248+
// - use back button
249+
// - input query is empty (because <input> autocomplete = off)
250+
window.addEventListener('pageshow', () => {
251+
input.value = helper.state.query;
252+
});
253+
241254
if (autofocus === true || autofocus === 'auto' && helper.state.query === '') {
242255
input.focus();
243256
input.setSelectionRange(helper.state.query.length, helper.state.query.length);

0 commit comments

Comments
 (0)