docsearch css classes conflict with autocomplete.js

[vvo]

We currently have all the autocomplete.js css classes added by default (aa-*), thus if you have both docsearch on a website and autocomplete.js you may have css conflicts when trying to style things.

It depends on how you write css to style docsearch but if you style it like we did for example in our headers or our websites: using aa-* css classes then other autocomplete.js menus will inherit from the same style.

To avoid this situations we could use the new cssClasses option of autocomplete.js: https://github.com/algolia/autocomplete.js#options.

This is what is done on Algolia Places for instance: https://github.com/algolia/places/blob/master/src/places.js#L67 we change the default prefix, thus we avoid any conflicting CSS class name if other autocomplete.js menus are present.

What do you think?

[pixelastic]

Argh, good catch.

We should definitely add that for future version, but this will be a breaking change for all the DocSearch already live.

It is possible to pass options to autocomplete.js through docsearch.js, so for people that have the issue today, I would suggest changing the prefix here and the associated CSS rules. Maybe add a not about that in the README somewhere?

For the v2 we'll need to change the prefix to something else, like ds-, but for now I'm afraid we have to keep the aa-.

[maxiloc]

Do we have any example (website) of where this is an issue ?

[vvo]

Yes on the places website, where we have both docsearch and places. Both are using autocomplete.js. Current docsearch styling is done via using the standard aa-* css classes. At first marking the places input look like docsearch.

In places.js I solved it by using the prefix option to prefix every css class with "ap-": https://github.com/algolia/places/blob/f480c7886cf18f57202151565f5d911fea523feb/src/places.js#L29

It would be better on the long run for docsearch to have specific ds-* only css classes rather than using the standard aa- css classes. So that we can isolate the styling versus conflicting with any other already existing autocomplete menu.