React InstantSearch - menuSelect widget refine() remove currentRefinement and reset to See All

I am creating a custom menuSelect widget on my react instantSearch. I have some logic to disable the drop-down menu, but I couldn’t set the refinement back to “see all” after disabling. I’ve tried refine() and refine(currentRefinement) and refine("") but none of it works. I passed the disabled boolean variable to this function. Here is my code snippet:

const VersionSelect = ({ items, currentRefinement, refine, disabled }) => (
     <select className="menu-select" 
        value={currentRefinement || ''}
        onChange={event => {refine(event.currentTarget.value);}
        disabled={disabled} >
        <option value="">All</option>
        {items.map(item => (
            <option
            key={item.label}
            value={item.isRefined ? currentRefinement : item.value}>
            {item.label}
            </option>
        ))}
        </select>
);

Just checking, to me this looks totally correct: https://codesandbox.io/s/react-instantsearch-app-zviue

In the real component we solve it slightly different, by giving the “all” option a known value, you can see that implementation here:

Thanks for checking. Yes, this code works for me normally but I would like to have the feature that when this drop-down menu is disabled, it will reset to “all”. Currently, when it is disabled it stays at the last refinement value. Can it trigger another refine action after disabling?

You can call refine with the empty value if it becomes disabled, but that depends on how you are triggering the disabling

In the parent Search component, I put

<CustomVersionSelect attribute="version" disabled={isVersion} />

and isVersion is a boolean variable. So when it it true, it immediately disables the select menu

It’s slightly more awkward, but you can do:

if (currentRefinement !== '' && disabled) {
  refine('')
}

hi, I am having difficulty finding where to insert this code snippet

const VersionSelect = ({ items, currentRefinement, refine, disabled }) => (
    (disabled ?
        (<select id="version-menu" className="filter-menu menu-disabled"
            value={currentRefinement || ''}
            onChange={() => {
                refine('');
            }} disabled={disabled} >
            <option value="">All versions</option>
            {items.map(item => (
                <option 
                    key={item.label}
                    value={item.isRefined ? currentRefinement : item.value}>
                    {item.label}
                </option>
            ))}
        </select>
        ) :
        ...enabled proper rendering of selection..
);
export const CustomVersionSelect = connectMenu(VersionSelect);

if I put it under onChange, it will never get processed because the is disabled. Thanks for your help!!

I just realised you can do the following instead:

<CustomVersionSelect disabled={disabled} defaultRefinement={disabled ? '' : undefined} />

Thanks! I added it to the parent component. when the Disabled is true, I console.log the defaultRefinement and it indeed sets to empty, but the VersionSelect menu doesn’t refine until the onChange event triggered, which means I need to go to the dropdown, randomly select another option, then it will change to All version. I am wondering how come defaultRefinement cannot overwrite the specific refine() function