React-autosuggest: bootstrap

[acthp]

Is the themeable support usable with bootstrap? I tried briefly to configure it for bootstrap classes, but couldn't see a way to do it. For example, bootstrap wants the container for a dropdown to have class 'open' when a dropdown-menu is open, but I don't see a way to add a class to the autosuggest container when the dropdown is open.

[moroshko]

@acthp Unfortunately, this is not possible. You can provide multiple classes like that:

theme={{ root: 'classA classB', ... }}

but there is not way to change that dynamically based on whether the autosuggest is open or not. The only indication you have is the aria-expanded attribute in the <input> itself, but this is probably not very helpful.

[ntgn81]

Sorry for digging this up. But it can actually be done with the current theming options. Having .open class on the parent .dropdown container will also open the .dropdown-menu.

I cloned the Basic sample on Codepen and added bootstrap stuff, working sample on codepen

The main changes are to provide theme object as @moroshko provided, and ovewrite renderSuggestion method to give back <a> tag that bootstrap.css expects

function renderSuggestion(suggestion) {
  return (
    <a href='#'>{suggestion.name}</a>
  );
}

Here's the theme object

const theme = {
  container: 'autosuggest dropdown',
  containerOpen: 'dropdown open',
  input: 'form-control',
  suggestionsContainer: 'dropdown-menu',
  suggestion: '',
  suggestionFocused: 'active'
};

[fdlk]

This is broken in the current version. The suggestionsContainer is no longer the <ul class="dropdown-menu"> but an extra <div class="dropdown-menu"> is put in between that breaks the bootstrap 3 styling.

[jeromebridge]

Does anyone have a workaround for this issue? Is there a way to style the ul object?

[v12]

Referring to this thread on StackOverflow, in order to make @ntgn81's solution work, CSS fix needs to be applied

.open .dropdown-menu {
  display: block;
  top: auto;
}

[tmcdonnell87]

@jeromebridge @fdlk

You can add a class to the <ul> using suggestionsList. You'll need to drop the dropdown and open classes to the suggestionsContainer since Bootstrap uses > in its selectors. (Bit awkward to have the open class on the container, but hey.

const theme = {
  container: 'autosuggest',
  input: 'form-control',
  suggestionsContainer: 'dropdown open',
  suggestionsList: 'dropdown-menu',
  suggestion: '',
  suggestionFocused: 'active',
};

[kornicameister]

Tried to style with bootstrap 4.0.0-beta-3. I've got a codepen here.

It however, uses 4.0.0-beta-2 of bootstrap. The "trick" part I did was to affect the way theme is passed down to the Autosuggest.

const theme = {
  container: 'autosuggest',
  input: 'form-control',
  suggestionsContainer: 'dropdown',
  suggestionsList: `dropdown-menu ${suggestions.length ? 'show' : ''}`,
  suggestion: 'dropdown-item',
  suggestionFocused: 'active'
};

if you want to use variation with <button/>:

private renderSuggestion(cmd: any, params: AutoSuggest.RenderSuggestionParams) {
    return <button className='dropdown-item' type='button'>{cmd as string}</button>;
}

const theme = {
  container: 'autosuggest',
  input: 'form-control',
  suggestionsContainer: 'dropdown',
  suggestionsList: `dropdown-menu ${suggestions.length ? 'show' : ''}`,
  suggestionFocused: 'active'
};

NOTE: removed suggestion theme

BTW: Here you can find the PR I managed to got it working.

[kornicameister]

@moroshko would that be good idea to add PR with an example how to do things with bootstrap 4 ?

[ROldford]

@kornicameister Your theme is great, but it should be _suggestionHighlighted_, not _suggestionFocused_. That was the only part that didn't work right away.

[SwarShah]

Here is the updated Codepen of @kornicameister which was broken and it also reflects the change @ROldford suggested. https://codepen.io/swarshah/pen/zYvyVad