Experiencing an issue only on Safari browsers (iOS and Mac) where the dropdown seems to close too early on clicking a product link. You click on a result in the dropdown menu but you aren't routed to the link you clicked on, you remain on the same page. I was able to track it down to this block of code:
function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
// If focus is moved to the results container, do not hide the results
if (event.relatedTarget && event.relatedTarget instanceof HTMLElement && event.relatedTarget.classList.contains('instantSearchResultsDropdownContainer__link')) {
return;
}
setShowResults(false);
}
She made a small change to the equivalent vanilla JavaScript file (instant_search_dropdown) which wraps this function's logic in a small setTimeout of 300ms, and the addition of this short delay resolves the issue for me. It is a hacky workaround though, so I am posting in the hopes that there is a better solution:
e.createElement(
e.StrictMode,
null,
e.createElement(
W,
{ client: p },
e.createElement("input", {
type: "text",
value: i,
onChange: (e) => o(e.currentTarget.value),
onFocus: () => _(),
onBlur: function (e) {
// NM - This setTimeout wrapper is a hacky workaround. Replace this file when the plugin is updated with a fix --
// dropdown closes in Safari without routing to the product page.
setTimeout(() => {
(e.relatedTarget && e.relatedTarget instanceof HTMLElement && e.relatedTarget.classList.contains("instantSearchResultsDropdownContainer__link")) || s(!1);
}, 300);
},
"aria-expanded": u && c,
autoComplete: "off",
role: "combobox",
"aria-autocomplete": "list",
"aria-owns": u ? #${pe}-${n} : "",
ref: d,
}),
u && e.createElement(he, { queryTextParsed: l, containerIndex: n, setIsResultsContainerExpanded: f })
)
)
);
},
Once again, great plugin, thanks!!!
