Vue-instantsearch: v2 – Highlight component ignores some props

[francoischalifour]

Bug 🐞

What is the current behavior?

The ais-highlight component does not pick up the highlighted-tag-name property and does not apply the CSS classes correctly.

Make a sandbox with the current behavior

Sandbox →

What is the expected behavior?

Based on this sandbox, the tag name should be em and should have the CSS class ais-Highlight-highlighted appended.

What is the proposed solution?

InstantSearch.js 3 highlights with the mark tag by default, while Vue InstantSearch expects an em tag to transform.

Updating this matching with the mark tag should solve the problem.

What is the version you are using?

Vue InstantSearch 2.0.0

[samouss]

It won't solve the issue, the real problem form the placeholder that we use inside the request. We have to use the helper that InstantSearch expose with the version 3.x.x. We don't have to do this work manually since it's done by InstantSearch.

[jason-beach]

Is there a work around for this?

I'm experiencing the issue of the ais-Highlight-highlighted class not being added to the mark tag while using Vue InstantSearch. From what I understand, according to the Algolia docs, this should be working properly as its an optional parameter. I'd like to additionally report and confirm that @francoischalifour 's mention of the highlighted-tag-name property is not working as that's what I'm experiencing as well. Is this still a bug or are their work arounds for this?

I see that Algolia has implemented a demo of autocomplete here: https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/vue/ which works as expected. Am I missing something?

[Haroenv]

@jason-beach, thanks for pointing this out. It seems like we forgot about this bug. I just dived a bit deeper, and it seems like InstantSearch.js (by error) escaped twice if you have two hits widgets. The default tag it replaces things with is mark (without the class names), which means that we expected the wrong tags to be replaced in Vue InstantSearch, and thus had this error.

I'm just making a PR to InstantSearch to fix the double-escape bug, and then a PR here to fix the wrong-expected-tag bug.