fix(selector): root classname is applied twice

functional-tests/app/app.js

@@ -299,6 +299,9 @@ search.addWidget(
       { label: 'Top 100', value: 9901 },
       { label: 'Top 500', value: 9501 },
     ],
+    cssClasses: {
+      select: 'form-control',
+    },
   })
 );
 

src/components/Selector.js

@@ -18,7 +18,7 @@ export class RawSelector extends React.Component {
 
     return (
       <select
-        className={this.props.cssClasses.root}
+        className={this.props.cssClasses.select}
         onChange={this.handleChange}
         value={currentValue}
       >
@@ -42,6 +42,10 @@ RawSelector.propTypes = {
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
     ]),
+    select: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
     item: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),

src/components/__tests__/__snapshots__/Selector-test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Selector should render <Selector/> with numbers 1`] = `
 <select
-  className="custom-root"
+  className={undefined}
   onChange={[Function]}
   value={10}
 >
@@ -23,7 +23,7 @@ exports[`Selector should render <Selector/> with numbers 1`] = `
 
 exports[`Selector should render <Selector/> with strings 1`] = `
 <select
-  className="custom-root"
+  className={undefined}
   onChange={[Function]}
   value="index-a"
 >

src/widgets/hits-per-page-selector/__tests__/__snapshots__/hits-per-page-selector-test.js.snap

@@ -6,6 +6,7 @@ exports[`hitsPerPageSelector() calls twice ReactDOM.render(<Selector props />, c
     Object {
       "item": "ais-hits-per-page-selector--item custom-item",
       "root": "ais-hits-per-page-selector custom-root cx",
+      "select": "ais-hits-per-page-selector",
     }
   }
   currentValue={10}

src/widgets/hits-per-page-selector/hits-per-page-selector.js

@@ -35,13 +35,14 @@ const usage = `Usage:
 hitsPerPageSelector({
   container,
   items,
-  [ cssClasses.{root,item}={} ],
+  [ cssClasses.{root,select,item}={} ],
   [ autoHideContainer=false ]
 })`;
 
 /**
  * @typedef {Object} HitsPerPageSelectorCSSClasses
- * @property {string|string[]} [root] CSS classes added to the parent `<select>`.
+ * @property {string|string[]} [root] CSS classes added to the outer `<div>`.
+ * @property {string|string[]} [select] CSS classes added to the parent `<select>`.
  * @property {string|string[]} [item] CSS classes added to each `<option>`.
  */
 
@@ -94,6 +95,9 @@ export default function hitsPerPageSelector(
 
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
+    // We use the same class to avoid regression on existing website. It needs to be replaced
+    // eventually by `bem('select')
+    select: cx(bem(null), userCssClasses.select),
     item: cx(bem('item'), userCssClasses.item),
   };
 

src/widgets/numeric-selector/__tests__/numeric-selector-test.js

@@ -37,6 +37,7 @@ describe('numericSelector()', () => {
       shouldAutoHideContainer: false,
       cssClasses: {
         root: 'ais-numeric-selector custom-root cx',
+        select: 'ais-numeric-selector',
         item: 'ais-numeric-selector--item custom-item',
       },
       currentValue: 1,

src/widgets/numeric-selector/numeric-selector.js

@@ -30,7 +30,7 @@ const usage = `Usage: numericSelector({
   container,
   attributeName,
   options,
-  cssClasses.{root,item},
+  cssClasses.{root,select,item},
   autoHideContainer
 })`;
 
@@ -42,7 +42,8 @@ const usage = `Usage: numericSelector({
 
 /**
  * @typedef {Object} NumericSelectorCSSClasses
- * @property {string|string[]} [root] CSS classes added to the parent `<select>`.
+ * @property {string|string[]} [root] CSS classes added to the outer `<div>`.
+ * @property {string|string[]} [select] CSS classes added to the parent `<select>`.
  * @property {string|string[]} [item] CSS classes added to each `<option>`.
  */
 
@@ -98,6 +99,9 @@ export default function numericSelector({
 
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
+    // We use the same class to avoid regression on existing website. It needs to be replaced
+    // eventually by `bem('select')
+    select: cx(bem(null), userCssClasses.select),
     item: cx(bem('item'), userCssClasses.item),
   };
 

src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js

@@ -70,6 +70,7 @@ describe('sortBySelector()', () => {
       shouldAutoHideContainer: false,
       cssClasses: {
         root: 'ais-sort-by-selector custom-root cx',
+        select: 'ais-sort-by-selector',
         item: 'ais-sort-by-selector--item custom-item',
       },
       currentValue: 'index-a',

src/widgets/sort-by-selector/sort-by-selector.js

@@ -31,13 +31,14 @@ const usage = `Usage:
 sortBySelector({
   container,
   indices,
-  [cssClasses.{root,item}={}],
+  [cssClasses.{root,select,item}={}],
   [autoHideContainer=false]
 })`;
 
 /**
  * @typedef {Object} SortByWidgetCssClasses
- * @property {string|string[]} [root] CSS classes added to the parent `<select>`.
+ * @property {string|string[]} [root] CSS classes added to the outer `<div>`.
+ * @property {string|string[]} [select] CSS classes added to the parent `<select>`.
  * @property {string|string[]} [item] CSS classes added to each `<option>`.
  */
 
@@ -92,6 +93,9 @@ export default function sortBySelector(
 
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
+    // We use the same class to avoid regression on existing website. It needs to be replaced
+    // eventually by `bem('select')
+    select: cx(bem(null), userCssClasses.select),
     item: cx(bem('item'), userCssClasses.item),
   };