autocomplete
autocomplete copied to clipboard
algolia
detachedMediaQuery doesn't persist setQuery in the search bar input
Description
In a React implementation of autocomplete, when setting the query in an item's onSelect, it does not persist in the search bar input's value when you have detachedMediaQuery always on (detachedMediaQuery: '').
Reproduction
https://codesandbox.io/s/react-algolia-autocomplete-2-u9wqv?file=/src/App.js
Steps
- Click on the search bar
- Scroll to the "Can't find what you're looking for?" section at the bottom
- Click one of the query suggestions, like 'macbook'
- Scroll back up to see the search bar input. The search bar input should be blank.
Expected behavior
The value in the search bar input should persist when updating the query via setQuery in an onSelect, even if detached mode is on.
Environment
- OS: macOS
- Browser: Chrome, Safari, Firefox
- Autocomplete version: 1.1.0
Thanks for the bug report @jgarrow.
- Scroll back up to see the search bar input. The search bar input should be blank.
I think you meant "The search bar input should not be blank", right?
@francoischalifour The search bar should be blank when reproducing the bug in the Steps section, but the expected behavior is that it is NOT blank
My current workaround is to put the setQuery in onSelect in a timeout for 2ms (1ms is too short), but it's a hacky temporary solution:
setTimeout(() => {
setQuery(`${item.query} `);
}, 2);
setIsOpen(true);
refresh();
Yeah, it should fill the query with the item's value. We'll investigate why this happens. Thanks again.
Hey! I'm having the same issue in detached mode using Autocomplete v1.3.0 Thanks!
Hello everyone, I'm experiencing the same problem as well. Any news? Seems like there's an infinite loop happening with search suggestions (or recent searches) with detachedMediaQuery: "" and debug: false
Why after closing detached panel, these events happen, that clear the query?
onStateChange {activeItemId: null, query: 'Apeyron СД Трансформатор 60W (слим-металл) 5A 12V IP20 (140*40*30)', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
autocomplete.js:115 onStateChange {activeItemId: null, query: '', completion: null, collections: Array(1), isOpen: false, …}
My solution:
const {setIsOpen, setQuery} = autocomplete(...);
document.getElementById("openSearchPanel").onclick = function() {
setIsOpen(true);
setQuery(getInstantSearchUiState().query || "");
};
This is what worked form me
transformSource({source, onTapAhead}) {
return {
...source,
templates: {
...source.templates,
item(params) {
const {item} = params
return (
<div
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
onTapAhead(item)
}}
className="aa-ItemWrapper"
>
{source.templates.item(params).props.children}
</div>
)
},
},
}
},
This issue exists with the code Algolia supplies alongside this blog post: https://www.algolia.com/blog/ux/replicating-the-algolia-documentation-search-with-autocomplete/
The code only works because it is pinned to a specific commit (https://codesandbox.io/s/algoliaautocomplete-example-preview-panel-in-modal-zhhp8?file=/app.tsx)
It will not work with modern/official releases of Autocomplete due to the above issue.
Hi @francoischalifour @chuckmeyer,
As of v1.47.4, the issue still persists. Any update on when this issue will be fixed?
Thanks in advance.
@ben-algolia @algolia-yassine Is there a plan to fix this issue/bug? We are unable to use Detached Mode with Recent/Query plugins to assist the user with queries.
@goxmedia I think you may have been looking for someone else to @-mention
There issue is currently being looked by the Autocomplete core team, but no proper resolution method have been found at this stage. We'll keep you posted once we have a solution ready.
@seafoox Until this issue is fixed, we are unable to use the Query Suggestions or Recent Searches plugins within our Autocomplete config. This is undesirable for our user experience.
Can you please provide a timeline on when this issue will be fixed?
Thanks is advance.
Good morning, i am using "@algolia/autocomplete-js" and "algoliasearch/lite" in a remix application and have run into the same issue
please find the relevant code:
<div
onClick={(event) => {
onStateChange(item);
event.stopPropagation();
setQuery(item.query);
refresh();
}}
className="aa-ItemLink"
>
I have copied all the code below:
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
import algoliasearch from 'algoliasearch/lite';
import React, { Fragment, createElement, useEffect, useRef } from 'react';
import { render } from 'react-dom';
function Autocomplete(props) {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) {
return undefined;
}
const search = autocomplete({
container: containerRef.current,
renderer: { createElement, Fragment },
render({ children }, root) {
render(children, root);
},
...props,
});
return () => search.destroy();
}, [props]);
return <div ref={containerRef} />;
}
export function OscAutoComplete({ ALGOLIA_ID, ALGOLIA_ID_SEARCH_ONLY, onStateChange }) {
const searchClient = algoliasearch(ALGOLIA_ID, ALGOLIA_ID_SEARCH_ONLY);
return (
<>
<section className="block">
<Autocomplete
detachedMediaQuery={false}
placeholder={'Search for episodes'}
getSources={({ query, refresh, setQuery }) => {
return [
{
sourceId: 'episodes',
getItemUrl({ item }) {
return `https://www.learnwithjason.dev${item.url}`;
},
getItemInputValue: ({ item }) => item.query,
getItems() {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: 'shopify_products',
query,
params: {
hitsPerPage: 5,
},
},
],
});
},
templates: {
item({ item, components }) {
return (
<div
onClick={(event) => {
onStateChange(item);
event.stopPropagation();
setQuery(item.query);
refresh();
}}
className="aa-ItemLink"
>
<div className="aa-ItemContent">
<div className="aa-ItemIcon">
<img
src={item.image}
alt={item.title}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<components.Highlight
hit={item}
attribute="title"
/>
</div>
<div className="aa-ItemContentDescription">
<components.Snippet
hit={item}
attribute="content"
/>
</div>
</div>
</div>
<div className="aa-ItemActions">
<button
className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
type="button"
title="Select"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="currentColor"
>
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
</svg>
</button>
</div>
</div>
);
},
},
},
];
}}
/>
</section>
</>
);
}
@seafoox Looks like Autocomplete, Query Suggestions, Recent Searches, Preset, and Theme Classic were all recently upgraded to v1.8.0, however, the issue above was not captured in that release.
Can you advise on the roadmap to resolve this issue?
@goxmedia the issue is currently part of our midterm backlog. Please let me get back to you once have more visibility on a more precise timeline. Sorry for the inconvenience, in the meantime.
... thanks for the update and please let us know what the timeline looks like. Thanks.
On Mon, Feb 13, 2023 at 5:27 AM Alexandre Collin @.***> wrote:
@goxmedia https://github.com/goxmedia the issue is currently part of our midterm backlog. Please let me get back to you once have more visibility on a more precise timeline. Sorry for the inconvenience, in the meantime.
— Reply to this email directly, view it on GitHub https://github.com/algolia/autocomplete/issues/636#issuecomment-1427943489, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAVZQRA4EZPTF7LCX6CBB3WXIZDTANCNFSM5A4G7F4Q . You are receiving this because you were mentioned.Message ID: @.***>
@seafoox I see another version bump on Autocomplete, Query Suggestions, Recent Searches, Preset, and Theme Classic to v1.8.2 that did not contain the fix for this issue. Can you give me an update on where this issue currently sits in your backlog? Thx.,
