Instantsearch.js: "menuSelect" is not working in IE

Created on 2 Feb 2019  路  10Comments  路  Source: algolia/instantsearch.js

Hi! I have a documentation issue on InstantSearch.js. I could not find what I was looking for on the page "[menuSelect](https://community.algolia.com/instantsearch.js/v2/widgets/menuSelect.html

picture Lovely-Fellow

Most helpful comment

After checking the implementation, we use Array.prototype.find, which is not supported by IE by default.

For the widget to work in IE, you can add polyfills to your page:

<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>

We'll make sure to document that on the new documentation website.

picture francoischalifour on 5 Feb 2019
👍2 😄1

All 10 comments

menuSelect is expected to work in IE, could you share a bug reproduction?

Note that the code snippets use the ES6 syntax, which might break on that browser. In this case, you may want to replace consts with vars.

francoischalifour picture francoischalifour on 4 Feb 2019

Thank you for your reply.
Please check follwoing sandbox.
https://codesandbox.io/s/v81oyyw657
I can't show menuselect widget on IE with url https://v81oyyw657.codesandbox.io/

Lovely-Fellow picture Lovely-Fellow on 4 Feb 2019

CodeSandbox is not IE-compatible. You can see the menuSelect widget working on IE in the storybook.

Closing this issue. Feel free to open other ones if you need anything!

francoischalifour picture francoischalifour on 4 Feb 2019

I know CodeSandBox is not IE-compatible.
You can only check my code with CodeSandBox in Chrome.
And if you run my code on IE, it is not working.
Here is my code for menuselect.
const searchDiscover = instantsearch({
indexName: 'demo_ecommerce',
searchClient: algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5'),
});

const widget = instantsearch.widgets.menuSelect({
container: '#brand-list',
attribute: 'brand',
limit: 10,
templates: {
defaultOption: 'See All Brands',
},
});
searchDiscover.addWidget(widget);
searchDiscover.start();
Why my code is not runing on IE?
Please kindly check my code and give me your advice.
Thank you.

Lovely-Fellow picture Lovely-Fellow on 4 Feb 2019

As I said in my first answer, you need to replace the consts to vars. You might also need to remove any trailing coma if you want to support old versions of IE.

francoischalifour picture francoischalifour on 4 Feb 2019

Thanks a million Francoi!
I have tried as you tought, but still not working.
please check my following file and let me know what is wrong.





name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<link rel="manifest" href="./manifest.webmanifest" />
<link rel="shortcut icon" href="./favicon.png" />

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
/>
<link rel="stylesheet" href="./src/index.css" />
<link rel="stylesheet" href="./src/app.css" />

<title>ais-ecommerce-demo-app</title>



InstantSearch.js e-commerce demo

  <div class="left-panel">
    <div id="clear-refinements"></div>

    <h2>Brands</h2>
    <div id="brand-list"></div>
  </div>

  <div class="right-panel">
    <div id="searchbox" class="ais-SearchBox"></div>
    <div id="hits"></div>
    <div id="pagination"></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="./src/app.js"></script>


I wrote above code in one file "index.html" and run it with Chrome and IE.
In Chrome, it works well, but in IE it didn't work.
Please kindly check my code and give me your advice.
Thank you.

Lovely-Fellow picture Lovely-Fellow on 4 Feb 2019

Which version of IE are you using? What error is thrown?

francoischalifour picture francoischalifour on 5 Feb 2019

IE is version 11.523.17134.0
And menuselect is not displayed on IE.
Thank you.

Lovely-Fellow picture Lovely-Fellow on 5 Feb 2019

After checking the implementation, we use Array.prototype.find, which is not supported by IE by default.

For the widget to work in IE, you can add polyfills to your page:

<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>

We'll make sure to document that on the new documentation website.

francoischalifour picture francoischalifour on 5 Feb 2019
👍2 😄1

Great!
Working well now.
Very helpfull!!!
Thanks a million.

Lovely-Fellow picture Lovely-Fellow on 5 Feb 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

timkelty picture timkelty  路  3Comments
zackify picture zackify  路  4Comments
proudlygeek picture proudlygeek  路  4Comments
bobylito picture bobylito  路  3Comments
jvreeken picture jvreeken  路  3Comments