{"action":"reopened","issue":{"url":"https://api.github.com/repos/algolia/instantsearch.js/issues/1952","repository_url":"https://api.github.com/repos/algolia/instantsearch.js","labels_url":"https://api.github.com/repos/algolia/instantsearch.js/issues/1952/labels{/name}","comments_url":"https://api.github.com/repos/algolia/instantsearch.js/issues/1952/comments","events_url":"https://api.github.com/repos/algolia/instantsearch.js/issues/1952/events","html_url":"https://github.com/algolia/instantsearch.js/issues/1952","id":205734678,"number":1952,"title":"SearchBox dom breaking change in 2.2.0 and later","user":{"login":"shakefu","id":1046227,"avatar_url":"https://avatars1.githubusercontent.com/u/1046227?v=3","gravatar_id":"","url":"https://api.github.com/users/shakefu","html_url":"https://github.com/shakefu","followers_url":"https://api.github.com/users/shakefu/followers","following_url":"https://api.github.com/users/shakefu/following{/other_user}","gists_url":"https://api.github.com/users/shakefu/gists{/gist_id}","starred_url":"https://api.github.com/users/shakefu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shakefu/subscriptions","organizations_url":"https://api.github.com/users/shakefu/orgs","repos_url":"https://api.github.com/users/shakefu/repos","events_url":"https://api.github.com/users/shakefu/events{/privacy}","received_events_url":"https://api.github.com/users/shakefu/received_events","type":"User","site_admin":false},"labels":[{"id":434944406,"url":"https://api.github.com/repos/algolia/instantsearch.js/labels/%E2%97%BE%20react-instantsearch","name":"◾ react-instantsearch","color":"c5def5","default":false},{"id":238751632,"url":"https://api.github.com/repos/algolia/instantsearch.js/labels/%E2%9D%A4%20Bug","name":"❤ Bug","color":"fc2929","default":false}],"state":"open","locked":false,"assignee":{"login":"mthuret","id":6885378,"avatar_url":"https://avatars3.githubusercontent.com/u/6885378?v=3","gravatar_id":"","url":"https://api.github.com/users/mthuret","html_url":"https://github.com/mthuret","followers_url":"https://api.github.com/users/mthuret/followers","following_url":"https://api.github.com/users/mthuret/following{/other_user}","gists_url":"https://api.github.com/users/mthuret/gists{/gist_id}","starred_url":"https://api.github.com/users/mthuret/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mthuret/subscriptions","organizations_url":"https://api.github.com/users/mthuret/orgs","repos_url":"https://api.github.com/users/mthuret/repos","events_url":"https://api.github.com/users/mthuret/events{/privacy}","received_events_url":"https://api.github.com/users/mthuret/received_events","type":"User","site_admin":false},"assignees":[{"login":"mthuret","id":6885378,"avatar_url":"https://avatars3.githubusercontent.com/u/6885378?v=3","gravatar_id":"","url":"https://api.github.com/users/mthuret","html_url":"https://github.com/mthuret","followers_url":"https://api.github.com/users/mthuret/followers","following_url":"https://api.github.com/users/mthuret/following{/other_user}","gists_url":"https://api.github.com/users/mthuret/gists{/gist_id}","starred_url":"https://api.github.com/users/mthuret/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mthuret/subscriptions","organizations_url":"https://api.github.com/users/mthuret/orgs","repos_url":"https://api.github.com/users/mthuret/repos","events_url":"https://api.github.com/users/mthuret/events{/privacy}","received_events_url":"https://api.github.com/users/mthuret/received_events","type":"User","site_admin":false}],"milestone":null,"comments":5,"created_at":"2017-02-06T23:03:08Z","updated_at":"2017-03-01T13:50:24Z","closed_at":null,"body":"**Do you want to request a *feature* or report a *bug*?**\r\n\r\nBug.\r\n\r\n**Bug: What is the current behavior?**\r\n\r\nIn `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.\r\n\r\nThis backwards-incompatible breaking change is undocumented.\r\n\r\n<img width=\"1184\" alt=\"screen shot 2017-02-06 at 2 42 13 pm\" src=\"https://cloud.githubusercontent.com/assets/1046227/22670068/70549838-ec7c-11e6-86a7-fbad1453fe08.png\">\r\n\r\n**Bug: What is the expected behavior?**\r\n\r\nIn `2.1.0` the SearchBox widget rendered as below, respecting the translation strings [as documented](https://community.algolia.com/instantsearch.js/react/widgets/SearchBox.html). Some of the CSS here (borders, font size) is our theme, but the base is the SearchBox widget's.\r\n\r\n<img width=\"560\" alt=\"screen shot 2017-02-06 at 2 50 56 pm\" src=\"https://cloud.githubusercontent.com/assets/1046227/22669998/11263d4e-ec7c-11e6-8a7a-724547530ed6.png\">\r\n\r\n**Bug: What browsers are impacted? Which versions?**\r\n\r\nAll.\r\n\r\n**What project are you opening an issue for?**\r\n- react-instantsearch\r\n\r\n**What is the version you are using? Always use the latest one before opening a bug issue.**\r\n\r\nWe 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.\r\n\r\nHere 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:\r\n\r\n```jsx\r\n// components/InstantSearch.js\r\n            <div className=\"InstantSearch\">\r\n                <InstantSearch\r\n                  appId={app_id}\r\n                  apiKey={key}\r\n                  indexName={index}\r\n                  searchState={this.state.searchState}\r\n                  onSearchStateChange={this._onSearchStateChange}\r\n                  searchParameters={{hitsPerPage: 50}}>\r\n                  <SearchBox\r\n                      autoFocus={true}\r\n                      translations={{\r\n                          submit: \"Search\",\r\n                          reset: \"Reset\",\r\n                          placeholder: \"Search for users ...\",\r\n                      }} />\r\n                  <Stats />\r\n                  <Hits hitComponent={UserSummary} />\r\n                </InstantSearch>\r\n            </div>\r\n\r\n```\r\n\r\n```css\r\n/* components/InstantSearch.css */\r\n.ais-SearchBox__input {\r\n    border: 2px solid grey;\r\n    border-radius: 5px;\r\n    font-size: 24px;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    padding-left: 16px;\r\n    padding-right: 16px;\r\n    width: 350px;\r\n}\r\n\r\n/* Hide the blue focus outline */\r\n.ais-SearchBox__input:focus {\r\n    outline: 0;\r\n}\r\n\r\n.ais-SearchBox__reset {\r\n    background-color: white;\r\n    border-radius: 5px;\r\n    border: 2px solid lightgrey;\r\n    color: grey;\r\n    font-size: 24px;\r\n    height: 48px;\r\n    margin: 12px;\r\n    padding-bottom: 8px;\r\n    padding-left: 16px;\r\n    padding-right: 16px;\r\n    padding-top: 8px;\r\n}\r\n\r\n.ais-SearchBox__reset:focus, .ais-SearchBox__reset:active {\r\n    outline: 0;\r\n    background-color: #fdd;\r\n}\r\n```"}}
{"actor":{"display_login":"vvo"}}