Fixed lagging state of multiselect FluentUI component and added searchable options to select and multiselect

[TimWillebrands]

I ran into an issue where when I used the fluent-ui multiselect the state of the selection would lag behind the selection in the component itself. This happened because there where two react state setters where the second setter depended on the value set by the first:

setSelectedKeys(
    item.selected
      ? [...selectedKeys, item.key]
      : selectedKeys.filter((key) => key !== item.key)
);
setValue(selectedKeys);

My fix was to determine the selection separate from the setters and pass that to both setters in one go:

const newSelectedItems = item.selected
  ? [...selectedKeys, item.key]
  : selectedKeys.filter((key) => key !== item.key);

setSelectedKeys(newSelectedItems);
setValue(newSelectedItems);

---

Then I also lacked search in the fluent-ui select & multiselect widgets, I contemplated adding it by switching to fluent's ComboBox component since it seemed a bit more in-line with how fluent prescribes the usecase. But that way it didn't really match the way the other ui-framework widgets do search, which is admittedly a bit nicer than the combobox.
Ultimately I made a 'SearchableDropdown' component based on a reply on this Fluent-UI issue and used that instead.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-awesome-query-builder-examples	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2024 4:17pm
react-awesome-query-builder-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2024 4:17pm
react-awesome-query-builder-sandbox-next	✅ Ready (Inspect)	Visit Preview		Jul 12, 2024 4:17pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 09a6f3f:

Sandbox	Source
@react-awesome-query-builder/examples	Configuration
@react-awesome-query-builder/sandbox	Configuration
@react-awesome-query-builder/sandbox-simple	Configuration
@react-awesome-query-builder/sandbox-next	Configuration

[codecov]

Codecov Report

Attention: Patch coverage is 14.28571% with 12 lines in your changes missing coverage. Please review.

Project coverage is 82.10%. Comparing base (cf87d44) to head (09a6f3f).
Report is 1 commits behind head on master.

Files	Patch %	Lines
...ages/fluent/modules/widgets/SearchableDropdown.jsx	14.28%	6 Missing ⚠️
...uent/modules/widgets/value/FluentUIMultiSelect.jsx	16.66%	4 Missing and 1 partial ⚠️
...es/fluent/modules/widgets/value/FluentUISelect.jsx	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1090      +/-   ##
==========================================
- Coverage   82.15%   82.10%   -0.06%     
==========================================
  Files         211      212       +1     
  Lines       11099    11107       +8     
  Branches     1332     1335       +3     
==========================================
+ Hits         9118     9119       +1     
- Misses       1367     1373       +6     
- Partials      614      615       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ukrbublik]

Thanks for the PR.

Search in select boxes looks cool.

However I see one issue with the line you've deleted

selectedKeys={selectedKeys}

Multiselect ignores value prop

• Open examples app deployed by Vercel bot - https://react-awesome-query-builder-examples-olfmbcyve.vercel.app/
• Import spel multicolor.equals({'yellow', 'green'})
• Multiselect has no selected colors

[ukrbublik]

Btw, I think that using ComboBox with allowFreeform is a good idea in order to support allowCustomValues

react-awesome-query-builder/packages/fluent/modules/widgets/value/FluentUIMultiSelect.jsx

Line 10 in 7057376

allowCustomValues,

https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/examples/demo/config.tsx#L572

[ukrbublik]

Please remove selectedKeys state from FluentUIMultiSelect component and pass selectedKeys prop to Dropdown

[TimWillebrands]

I think my last commit should deal with the useless state, and passed the value directly to the dropdown

[TimWillebrands]

Forgot to run the linter....