SearchBox dom breaking change in 2.2.0 and later

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

Bug.

Bug: What is the current behavior?

In 2.2.0 and later, the SearchBox widget ignores translation strings, shows large icons, and breaks previous rendering as shown below without a major version change, which means packages are automatically upgraded by NPM according to semantic versioning.

This backwards-incompatible breaking change is undocumented.

Bug: What is the expected behavior?

In 2.1.0 the SearchBox widget rendered as below, respecting the translation strings as documented. Some of the CSS here (borders, font size) is our theme, but the base is the SearchBox widget’s.

Bug: What browsers are impacted? Which versions?

All.

What project are you opening an issue for?

• react-instantsearch

What is the version you are using? Always use the latest one before opening a bug issue.

We are forced to pin our version to <2.2.0 (meaning: 2.1.0) until we find some way to restore the old rendering behavior. An automatic upgrade according to semantic versioning of the default ^2.1.0 version string put us on 2.2.5. We were able to narrow it down to the 2.2.0 release as introducing this new breaking behavior, most likely PR #1795.

Here is a snippet of our code that generated the previous rendering on 2.1.0 and the broken rendering on 2.2.0 and later:

// components/InstantSearch.js
            <div className="InstantSearch">
                <InstantSearch
                  appId={app_id}
                  apiKey={key}
                  indexName={index}
                  searchState={this.state.searchState}
                  onSearchStateChange={this._onSearchStateChange}
                  searchParameters={{hitsPerPage: 50}}>
                  <SearchBox
                      autoFocus={true}
                      translations={{
                          submit: "Search",
                          reset: "Reset",
                          placeholder: "Search for users ...",
                      }} />
                  <Stats />
                  <Hits hitComponent={UserSummary} />
                </InstantSearch>
            </div>

/* components/InstantSearch.css */
.ais-SearchBox__input {
    border: 2px solid grey;
    border-radius: 5px;
    font-size: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    width: 350px;
}

/* Hide the blue focus outline */
.ais-SearchBox__input:focus {
    outline: 0;
}

.ais-SearchBox__reset {
    background-color: white;
    border-radius: 5px;
    border: 2px solid lightgrey;
    color: grey;
    font-size: 24px;
    height: 48px;
    margin: 12px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
}

.ais-SearchBox__reset:focus, .ais-SearchBox__reset:active {
    outline: 0;
    background-color: #fdd;
}

[vvo]

@shakefu The current SearchBox state is that we are now using icons by default for search and reset buttons. So there’s no more “translations”, if you want to have a reset text button in latest version you can do this: https://jsfiddle.net/6p0ta8op/1/

We might want to revisit the SearchBox component if we have another good complete proposal allowing both text and icons in an easy way where styling is also easily.

[vvo]

Migration guide to V3: https://github.com/algolia/instantsearch.js/blob/v2/CHANGELOG.md#migration-guide