Jimu AdvancedSelect widget issue when using filter and isMultiple

Question

I'm using the Jimu AdvancedSelect widget in an ExperienceBuilder 1.15 custom widget. It mostly works, but when using the isMultiple=True option, and the user has a filter value, then when the user clicks an item to select it, the list immediately reverts to full unfiltered state, even though it should have remained in the specified filtered state. This is extremely confusing for the user obviously. Before clicking the "DWW Rainwise" item checkbox: Immediately after clicking the checkbox: Code Snippet: const [selectedLayers, setSelectedLayers] = useState([]); const onClickLayerExplorer = (items) => { setSelectedLayers(items); } (category.ID == 0 || layer.category == category.ID)) .map((layer, index) => ({ label: layer.name, value: layer.index }))} > {' '}

kxu · Answer

That's great to hear that it's working.

EmoryHorvath · Answer

Okay, yes, that was what i suspected was probably happening.  Good.  Note that it doesn't completely wipe out the filtering because the filter value is still displayed in the filter box.

But i think the suggested solution is hairy and even if i got it to work somehow, i think it'd then break the filtering because now the filtering is pulling from this new filtered staticValues instead of from the full list.

So i tried something a little different instead.  You see from the way i'm setting the staticValues property that i'm actually generating & assigning a new staticValues object for each re-render.  I suspected that might be confusing the widget, so i changed my code to generate the item list only once at startup and then just assign the same list (same object reference) to staticValues each re-render.  And now things seem to be working.

Jeff.Thompson@arlingtontx.gov_arlingtontx · Answer

I don't know enough about AdvancedSelect to give an exact solution, but here's what's happening. The onClick() function fires every time a checkbox is changed. You are then passing that value into a useState() function. useState() will cause the component to re-render which wipes the filtering. You will need to capture the staticValues and store it in a piece of state so that you can access it after the re-render.