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[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[vercel[bot]]

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[bot]]

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 09a6f3fbef7dea2eb827a9eb926aef5707a0ca4e:

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[bot]]

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 :warning:
...uent/modules/widgets/value/FluentUIMultiSelect.jsx	16.66%	4 Missing and 1 partial :warning:
...es/fluent/modules/widgets/value/FluentUISelect.jsx	0.00%	0 Missing and 1 partial :warning:

Additional details and impacted files

```diff @@ 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 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: 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 https://github.com/ukrbublik/react-awesome-query-builder/blob/70573762818f93d551af827e6b93dc81a42648ae/packages/fluent/modules/widgets/value/FluentUIMultiSelect.jsx#L10 https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/examples/demo/config.tsx#L572

[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....