Custom Menu Connector with statics values

Hi,

I try to use manual values to a create a static Menu. I follow this link : add manual values but I face a problem when there is no item in the search.

There is my code with connectMenu:

const staticMenu = instantsearch.connectors.connectMenu(
    ({ items, refine, widgetParams }, isFirstRender) => {
        const container = widgetParams.container;

        if (isFirstRender) {
            const select = document.createElement('select');

            select.addEventListener('change', event => {
                refine(event.currentTarget.value);
            });
            container.appendChild(select);
        }

        const select = container.querySelector('select');

        const list = widgetParams.items.map(({label: staticLabel, value}) => {
             const { isRefined } = items.find(
                  ({label}) => label === staticLabel
             ) || { isRefined: false };

             return `
                 <option value="${value}" ${isRefined ? 'selected' : ''}>
                       ${staticLabel}
                 </option>
             `;
         });

         select.innerHTML = `
                    ${list.join('')}
         `;
    }          
);

search.addWidget(
    staticMenu({
        container: document.querySelector('#test-select'),
        attribute: 'merchant.name',
        items: [
            { label: 'Seel All', value: '' },
            { label: 'First Merchant', value: 'First Merchant' },
            { label: 'Second Merchant', value: 'Second Merchant' },
            { label: 'Thrid Merchant', value: 'Third Merchant' },
        ],
    })
);

Everything is working fine but when i select a merchant which don’t have results (for example: First Merchant has no results), the attribute “selected” is not add to the option.

I would like that “selected” attribute be add to the selected option too even there is an item or not.

I think the problem is that there is no item for “First Merchant” in “items” from connector. So it can’t find the selected value here:

const { isRefined } = items.find(
     ({label}) => label === staticLabel
) 

How could i manage this ?
Can i have access to the state or the refined value somehow ?

Thank

Hey Florian! Thanks for reaching out! Just so you know we’re moving to Discord ( Invite link: Algolia )

Is there any chance you’ll have a live url for me to try? Or maybe a github repo I could check out?

From the top of my mind, I would make sure your attribute is correct ( no space or anything )

Hi @lucas.bonomi,

Well i use a professional Algolia for my work so, i can’t give you the access keys.
But do you have a demo codesandbox ? I think i could create a test code.

Thx

Sure thing ! Can this sandbox help you demonstrating your example? https://codesandbox.io/p/sandbox/instantsearchjs-1igbb

LMK

Thanks @lucas.bonomi,

I found a demo on codesandbox. I added my code so you could understrand where is the problem.
https://codesandbox.io/p/sandbox/delicate-sun-p2v3l4

If you select a real brand like “Apple” or “Samsung”, the dropdrown “selected” attribute is added correctly.
But if you select “Fake Brand”, there is no “selected” attribute added and it shows the default value “All brands”.

Hope you will help me with this thing !

Hey @f.sadem !

Thanks for reproducing the sandbox, I’m investigating right now. I wasn’t really aware you could add manual values :slight_smile:

Usually you want to make menus with data returned from the search api to avoid “empty” attribute matching.

Let me get back to you ASAP.

Hi @lucas.bonomi

Any news ?

THX