fix(MenuSelect): Adds id prop to MenuSelect

algolia · Jun 30, 2021 · dad1bcd · dad1bcd
1 parent 3739d5c
commit dad1bcd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/react-instantsearch-dom/src/components/MenuSelect.js b/packages/react-instantsearch-dom/src/components/MenuSelect.js
@@ -8,6 +8,7 @@ const cx = createClassNames('MenuSelect');
 
 class MenuSelect extends Component {
   static propTypes = {
+    id: PropTypes.string,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         label: PropTypes.string.isRequired,
@@ -44,13 +45,14 @@ class MenuSelect extends Component {
   };
 
   render() {
-    const { items, canRefine, translate, className } = this.props;
+    const { id, items, canRefine, translate, className } = this.props;
 
     return (
       <div
         className={classNames(cx('', !canRefine && '-noRefinement'), className)}
       >
         <select
+          id={id}
           value={this.selectedValue}
           onChange={this.handleSelectChange}
           className={cx('select')}

diff --git a/packages/react-instantsearch-dom/src/components/__tests__/MenuSelect.js b/packages/react-instantsearch-dom/src/components/__tests__/MenuSelect.js
@@ -46,6 +46,16 @@ describe('MenuSelect', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('default menu select with custom id', () => {
+    const id = 'menu-select';
+    const wrapper = mount(
+      <MenuSelect id={id} refine={() => {}} items={[]} canRefine={false} />
+    );
+
+    const select = wrapper.find('select').getDOMNode();
+    expect(select.getAttribute('id')).toEqual(id);
+  });
+
   it('default menu select with no refinement', () => {
     const tree = renderer
       .create(<MenuSelect refine={() => {}} items={[]} canRefine={false} />)

diff --git a/packages/react-instantsearch-dom/src/widgets/MenuSelect.js b/packages/react-instantsearch-dom/src/widgets/MenuSelect.js
@@ -9,6 +9,7 @@ import MenuSelect from '../components/MenuSelect';
  * @kind widget
  * @requirements The attribute passed to the `attribute` prop must be present in "attributes for faceting"
  * on the Algolia dashboard or configured as `attributesForFaceting` via a set settings call to the Algolia API.
+ * @propType {string} id - the id of the select input
  * @propType {string} attribute - the name of the attribute in the record
  * @propType {string} [defaultRefinement] - the value of the item selected by default
  * @propType {number} [limit=10] - the minimum number of diplayed items