update dependencies and build tool

New Feature template

Allow json objects on suggestion list

Description

Steps to reproduce

change suggestion list (component props)

Expected Behavior

change suggestions on next render

Actual Behavior

change suggestions when filter is done

Version

v0.0.28

Update react tests using react-testing-library

Select an issue type

• bug
• new feature

Bug template

Test Case

Steps to reproduce

Expected Behavior

Actual Behavior

Version

New Feature template

Description

Would be awesome if can use up/down and enter key to select.

Do you want to request a feature or report a bug?

• feature
• bug

I want to request a feature.

What is the current behavior?

1. Using ssugestor in a Bootstrap 4 environment still makes it output HTML with classes relevant to Bootstrap 3, specifically glyphicon.

   More generally, there is no way to adjust the classNames for each of the HTML elements in the module's output.

   For example, there is no way to configure the module if we didn't want form-control to be on the <input> element, or if instead of glyphicon we wanted to use fa fa-window-close (Font Awesome).

2. The active <li> element does not have a class of its own, so it's impossible to target it using your own CSS. In fact, no <li> element has a class.

What is the expected behavior?

1. It would be nice if we could pass in an object to set each of the classNames, like:

<Suggestor
    list={['suggestion-a', 'suggestion-b', 'suggestion-c', '...', 'suggestion-z']}
    arrow
    close
    classSchema={{
        root: 'input-group',
        arrowExpand: 'flashing',
        arrowRemove: 'fa fa-window-close',
        list: 'dropdown-menu'
        itemInactive: 'text-muted',
        itemActive: 'text-primary'
    }}
/>

2. Just an idea: auto-detect what CSS framework is in effect and apply the relevant classSchema accordingly?

   Or have pre-made classSchema for Bootstrap 3, Bootstrap 4, etc., so we can just import that from suggestor, and apply it ourselves.

3. The <li> elements should have a specific class instead of just inline CSS. Bootstrap has dropdown-item for this exact purpose. Also, the active <li> element uses an active class (in addition to the dropdown-item it's already using).

   Furthermore, I stongly suggest removing almost all inline CSS, and replace them CSS classes for styling. This would allow users to customize much more freely, and also helps separate “style” from “layout”.

If this is a feature request, what is motivation or use case for changing the behavior?

I was using Bootstrap 4 and this module was exactly what I needed. But I realised it used Bootstrap 3 classes to style itself so I thought that could be fixed.

Additional information

Relevant versions:

• ssuggestor 0.9.1.
• bootstrap 4.1.1

New Feature

Flag: Select only suggestion on list

Description