This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
Highlighted element classes are not applied #759
Labels
Comments
|
You're right, this seems to be wrong. I'm looking now what solution is possible. It seems like we are skipping generated class names |
Haroenv
added a commit
to algolia/instantsearch
that referenced
this issue
Jan 21, 2020
This is related to: algolia/vue-instantsearch#759. Just adding this doesn't totally solve the situation yet, but it at least allows a hook for adding extra class names. What's interesting to note is that the suit helper in InstantSearch only concatenates names, and thus the keys for cssClasses are just the modifier. In Vue InstantSearch the keys for classNames are the generated classes, since the suit helper will check those keys directly. I wonder if we could move to such a system in InstantSearch.js in the future. This will allow us to remove these mappings, and deal with it at call site (which likely has a decrease in bundle size)
Haroenv
added a commit
to algolia/instantsearch
that referenced
this issue
Feb 19, 2020
* feat(highlight): add cssClasses to snippet & highlight helper This is related to: algolia/vue-instantsearch#759. Just adding this doesn't totally solve the situation yet, but it at least allows a hook for adding extra class names. What's interesting to note is that the suit helper in InstantSearch only concatenates names, and thus the keys for cssClasses are just the modifier. In Vue InstantSearch the keys for classNames are the generated classes, since the suit helper will check those keys directly. I wonder if we could move to such a system in InstantSearch.js in the future. This will allow us to remove these mappings, and deal with it at call site (which likely has a decrease in bundle size) * add comment explaining why helper isn't used * chore: change bundlesize slightly
|
Having a similar issue. Been trying to solve it for hours thinking i have been doing something wrong. |
|
Sorry! We have since given the ability in InstantSearch.js to forward highlighted class name, but it couldn't yet have been used in Vue InstantSearch. I'll remove it from the docs in the mean time before it can be used here. |
|
This has been fixed in v3, as well as 2.7.0 :) https://codesandbox.io/s/sad-moon-z0zd7 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug 🐞
What is the current behavior?
Vue InstantSearch does not apply a highlighted element’s class names. I found Issue #639 had been closed but it appears it’s still affecting behavior.
Make a sandbox with the current behavior
I’ve added Tailwind to the example and applied some classnames to lines 33-35. The classes that are assigned to
ais-Highlightare rendered, but the classes that are assigned toais-Highlight-highlightedare not.https://codesandbox.io/s/reverent-payne-n4h68?fontsize=14&hidenavigation=1&theme=dark
What is the expected behavior?
In my sandbox, we should see classes of
normal font-boldapplied to the marked highlighted elements.Does this happen only in specific situations?
Happens consistently for me.
What is the proposed solution?
Ensuring that InstantSearch respects the properties in its documentation
What is the version you are using?
Vue InstantSearch 2.0.1
The text was updated successfully, but these errors were encountered: