Skip to content

RUI-000: Add applyOnChange to MultiSelectField and keep the Apply button its full height - #430

Open
deslay1 wants to merge 2 commits into
embeddable-hq:mainfrom
deslay1:multi-select-apply-on-change
Open

deslay1 wants to merge 2 commits into
embeddable-hq:mainfrom
deslay1:multi-select-apply-on-change

Conversation

@deslay1

@deslay1 deslay1 commented Sep 22, 2026

Copy link
Copy Markdown

Why is this pull-request needed?

We (Bambuser) replaced a dropdown that filtered on every click with MultiSelectField. Users read the pending-then-Apply flow as "the filter does not work", and it came up in review. We also hit a layout bug: with more options than fit in the dropdown, the Apply button shrinks to about 18px and its label is clipped.

Main changes

  • MultiSelectField gets an opt-in applyOnChange prop. When set, every tick, untick and select all calls onChange straight away, the dropdown stays open, and the Apply button is not rendered. Default behaviour is unchanged.
  • .submitButton and .searchField no longer shrink, and the option list gets min-height: 0, so only the list shrinks and scrolls when options overflow the dropdown.

Test evidence

Before, 30 options, Apply squashed:

many-options-before

After:

many-options-after

applyOnChange: Red and Blue ticked, applied at once, no Apply button:

apply-on-change
  • New unit tests: onChange per tick, no Apply button, select all applies at once, dropdown stays open, default behaviour untouched.
  • New stories ApplyOnChange and ManyOptions.
  • npm run types:check, prettier:check, test green. eslint:check reports three pre-existing warnings in unrelated files.

Osama Eldawebi added 2 commits September 22, 2026 14:20
Opt-in prop. When set, every tick, untick and select all calls onChange
straight away, the dropdown stays open and the Apply button is not
rendered. Off by default, so existing fields keep the Apply step.
With more options than fit in the dropdown, the list, the search field
and the Apply button all shrank, and the button ended at about 18px
with its label clipped. Only the list shrinks and scrolls now.
@coderabbitai

coderabbitai Bot commented Sep 22, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c406505b-4322-4364-9910-1964ba1b59c6

📥 Commits

Reviewing files that changed from the base of the PR and between f2c63ea and 3e5a8d8.

📒 Files selected for processing (7)
  • .changeset/multi-select-apply-button-height.md
  • .changeset/multi-select-apply-on-change.md
  • src/components/editors/selects/MultiSelectField/MultiSelectField.stories.tsx
  • src/components/editors/selects/MultiSelectField/MultiSelectField.test.tsx
  • src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
  • src/components/editors/selects/selects.module.css
  • src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.module.css

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


Walkthrough

MultiSelectField now supports immediate selection commits through applyOnChange. Its dropdown layout keeps the search field and Apply button at full height while the option list shrinks and scrolls. Stories, tests, and changesets cover the updates.

Changes

MultiSelectField interaction and layout updates

Layer / File(s) Summary
Immediate selection application
src/components/editors/selects/MultiSelectField/MultiSelectField.tsx, src/components/editors/selects/MultiSelectField/MultiSelectField.test.tsx, src/components/editors/selects/MultiSelectField/MultiSelectField.stories.tsx, .changeset/multi-select-apply-on-change.md
Adds optional applyOnChange, commits option and select-all changes immediately when enabled, omits the Apply button, and retains the existing Apply flow by default. Stories and tests cover the behavior.
Dropdown height constraints
src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.module.css, src/components/editors/selects/selects.module.css, .changeset/multi-select-apply-button-height.md
Allows the option list to shrink and scroll while the search field and submit button do not shrink.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MultiSelectField
  participant onChangeConsumer
  User->>MultiSelectField: Select or clear an option
  MultiSelectField->>onChangeConsumer: Call onChange with updated values
  MultiSelectField-->>User: Keep dropdown open without Apply button
Loading

Suggested reviewers: mad-raccoon

Merge Risk: ⚪ Minimal · up to 3e5a8

The opt-in behavior commits selections immediately while preserving existing Apply behavior by default, and the dropdown layout supports scrolling options without blocking controls. The change is ready to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files. (4 skipped: 4 … Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly summarizes the two main changes: adding opt-in applyOnChange behavior and preventing the Apply button from shrinking.
Description check ✅ Passed The description includes all required sections. It explains the need, details the main changes, and provides test evidence, including test results and known unrelated ESLint warnings.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files. (4 skipped: 4 unsupported.)

  • Fix all pre-merge checks with AI
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant