fix(HitsPerPage): Adds id prop to HitsPerPage, Select components (#3072)

algolia · Jul 1, 2021 · bc75d75 · bc75d75
1 parent 1f2797f
commit bc75d75
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/react-instantsearch-dom/src/components/HitsPerPage.js b/packages/react-instantsearch-dom/src/components/HitsPerPage.js
@@ -8,6 +8,7 @@ const cx = createClassNames('HitsPerPage');
 
 class HitsPerPage extends Component {
   static propTypes = {
+    id: PropTypes.string,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         value: PropTypes.number.isRequired,
@@ -24,11 +25,12 @@ class HitsPerPage extends Component {
   };
 
   render() {
-    const { items, currentRefinement, refine, className } = this.props;
+    const { id, items, currentRefinement, refine, className } = this.props;
 
     return (
       <div className={classNames(cx(''), className)}>
         <Select
+          id={id}
           onSelect={refine}
           selectedItem={currentRefinement}
           items={items}

diff --git a/packages/react-instantsearch-dom/src/components/__tests__/HitsPerPage.js b/packages/react-instantsearch-dom/src/components/__tests__/HitsPerPage.js
@@ -52,6 +52,27 @@ describe('HitsPerPage', () => {
         .toJSON()
     ).toMatchSnapshot());
 
+  it('should forward the id to Select', () => {
+    const id = 'ais-select';
+    const wrapper = mount(
+      <HitsPerPage
+        id={id}
+        createURL={() => '#'}
+        items={[
+          { value: 2, label: '2 hits per page' },
+          { value: 4, label: '4 hits per page' },
+          { value: 6, label: '6 hits per page' },
+          { value: 8, label: '8 hits per page' },
+        ]}
+        refine={() => null}
+        currentRefinement={2}
+      />
+    );
+
+    const selectedValue = wrapper.find('select').getDOMNode();
+    expect(selectedValue.getAttribute('id')).toEqual(id);
+  });
+
   it('refines its value on change', () => {
     const refine = jest.fn();
     const wrapper = mount(

diff --git a/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js b/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js
@@ -10,6 +10,7 @@ import HitsPerPage from '../components/HitsPerPage';
  *
  * @name HitsPerPage
  * @kind widget
+ * @propType {string} id - The id of the select input
  * @propType {{value: number, label: string}[]} items - List of available options.
  * @propType {number} defaultRefinement - The number of items selected by default
  * @propType {function} [transformItems] - Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.