SearchBox dom breaking change in 2.2.0 and later

[shakefu]

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;
}

[vinhlh]

and any migration guide to v3 too 💃

[vvo]

Thanks for the detailed explanation we will try that, it was definitely not done on purpose.

(And I will write a v3 migration guide too)

[mthuret]

Hi @shakefu, we're sorry for that unwanted breaking change.

With this PR #1954 you will be able to get back the translation of Submit/Reset.
After that you'll need to do some modifications of your stylesheet:

• hide the submit button
• hide the reset svg icon
• change the margin of ais-SearchBox__reset to 9px for example

Will this work for you?

[shakefu]

@mthuret Yeap. I'll keep an eye on that PR for when it's merged and close this ticket when I get our code updated.

[vvo]

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

[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.

[shakefu]

@vvo Thanks! We got ours working, will update to the 3.x line in a sprint or two.