Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LocalStorageRecentSearchesPlugin not working with other hooks than onSubmit #1030

Open
vrilcode opened this issue Oct 5, 2022 · 1 comment

Comments

@vrilcode
Copy link

vrilcode commented Oct 5, 2022

Description

You can’t use LocalStorageRecentSearchesPlugin with autocomplete option defaultActiveItemId (e.g. defaultActiveItemId: 0), because onSubmit lifecycle hook is not fired by autocomplete in this case. LocalStorageRecentSearchesPlugin is based on this hook. It would be good to have the choice, which lifecycle hooks trigger the plugin. In practice also onSelect is needed, but it’s currently only for querySuggestionsPlugin implemented:

if (source.sourceId === 'querySuggestionsPlugin' && inputValue) {

PS: It's unclear, whether incompatibility with defaultActiveItemId is intended behavior or a bug. At least it's very confusing and not mentioned anywhere in the docs.

Expected behavior

LocalStorageRecentSearchesPlugin should handle onSubmit and onSelect hook. At least, it should be mentioned in the docs, if it's not possible.

Environment

  • Autocomplete version: 1.7.1
@vrilcode
Copy link
Author

vrilcode commented Oct 5, 2022

This is a workaround written in plain ES6+, which works for me at the moment:

import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'
import { createLocalStorage } from '@algolia/autocomplete-plugin-recent-searches/dist/esm/createLocalStorage'
import { LOCAL_STORAGE_KEY }  from '@algolia/autocomplete-plugin-recent-searches/dist/esm/constants'

const storage = createLocalStorage({
  key: `${LOCAL_STORAGE_KEY}:my_search`,
  limit: 5
})

const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: 'my_search',
  subscribe: ({ onSelect }) => {
    onSelect(({ item }) => {
      storage.onRemove(item.id)
      storage.onAdd(item)
    })
  }
})

recentSearchesPlugin.storage = storage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant