fix(searchbox): add maxlength 512 (#542)

* fix(searchbox): add maxlength 512 The API can only handle queries up to 512 characters and would throw an error in this case (copy pasted addresses for example). This prevents users from typing more than possible, and would simply discard later characters fixes #510 (haha would be funny is that was issue 512) supported in all browsers, but would fall back nicely anyway: http://caniuse.com/#feat=maxlength cc @67ideas * use maxLength instead of maxlength :react: * update snapshots * 😶
algolia · Nov 2, 2017 · 5bd4033 · 5bd4033
1 parent fbf098f
commit 5bd4033
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
@@ -227,6 +227,7 @@ class SearchBox extends Component {
             autoCapitalize="off"
             spellCheck="false"
             required
+            maxLength="512"
             value={query}
             onChange={this.onChange}
             {...searchInputEvents}

diff --git a/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap
@@ -54,6 +54,7 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
           autoCorrect="off"
           autoFocus={false}
           className="ais-SearchBox__input"
+          maxLength="512"
           onChange={[Function]}
           placeholder="Search here…"
           required={true}
@@ -219,6 +220,7 @@ exports[`Menu Menu with search inside items with search results 1`] = `
           autoCorrect="off"
           autoFocus={false}
           className="ais-SearchBox__input"
+          maxLength="512"
           onChange={[Function]}
           placeholder="Search here…"
           required={true}
@@ -340,6 +342,7 @@ exports[`Menu applies translations 1`] = `
           autoCorrect="off"
           autoFocus={false}
           className="ais-SearchBox__input"
+          maxLength="512"
           onChange={[Function]}
           placeholder="placeholder"
           required={true}

diff --git a/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap
@@ -55,6 +55,7 @@ exports[`RefinementList applies translations 1`] = `
             autoCorrect="off"
             autoFocus={false}
             className="ais-SearchBox__input"
+            maxLength="512"
             onChange={[Function]}
             placeholder="placeholder"
             required={true}
@@ -309,6 +310,7 @@ exports[`RefinementList refinement list with search inside items but no search r
             autoCorrect="off"
             autoFocus={false}
             className="ais-SearchBox__input"
+            maxLength="512"
             onChange={[Function]}
             placeholder="Search here…"
             required={true}
@@ -491,6 +493,7 @@ exports[`RefinementList refinement list with search inside items with search res
             autoCorrect="off"
             autoFocus={false}
             className="ais-SearchBox__input"
+            maxLength="512"
             onChange={[Function]}
             placeholder="Search here…"
             required={true}

diff --git a/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap
@@ -48,6 +48,7 @@ exports[`SearchBox applies its default props 1`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}
@@ -138,6 +139,7 @@ exports[`SearchBox lets you customize its theme 1`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}
@@ -228,6 +230,7 @@ exports[`SearchBox lets you customize its translations 1`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="PLACEHOLDER"
       required={true}
@@ -318,6 +321,7 @@ exports[`SearchBox lets you give custom components for reset and submit 1`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}
@@ -400,6 +404,7 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
       autoCorrect="off"
       autoFocus={true}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}
@@ -490,6 +495,7 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}
@@ -580,6 +586,7 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
       autoCorrect="off"
       autoFocus={false}
       className="ais-SearchBox__input"
+      maxLength="512"
       onChange={[Function]}
       placeholder="Search here…"
       required={true}