Skip to content

fix(frontend): show required marker for select and multiselect widgets#41735

Open
Arbab1308 wants to merge 1 commit intoappsmithorg:releasefrom
Arbab1308:fix/select-required-marker
Open

fix(frontend): show required marker for select and multiselect widgets#41735
Arbab1308 wants to merge 1 commit intoappsmithorg:releasefrom
Arbab1308:fix/select-required-marker

Conversation

@Arbab1308
Copy link
Copy Markdown

@Arbab1308 Arbab1308 commented Apr 11, 2026

Description

This PR fixes the bug where required Select widgets do not display the red * required marker, even when the "Required" validation is enabled.

What changed

  • Passed the isRequired flag from the Select and MultiSelect widgets down to their label components.
  • Ensured the shared label component renders the * for both Select and MultiSelect when Required is enabled.

Testing

  • Manual: Created forms with Select and MultiSelect widgets, turned Validation → Required ON, and verified that the * appears next to the labels. Turning Required OFF hides the *.

Fixes

Summary by CodeRabbit

  • Improvements
    • Multi-select and select form fields now consistently display required state indicators for improved user guidance.
    • Enhanced form validation feedback across widget components.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 01179458-64ce-4225-afff-fb83d73db491

📥 Commits

Reviewing files that changed from the base of the PR and between 2e0a3e0 and 4c9129d.

📒 Files selected for processing (3)
  • app/client/src/widgets/MultiSelectWidget/component/index.tsx
  • app/client/src/widgets/MultiSelectWidget/widget/index.tsx
  • app/client/src/widgets/SelectWidget/component/index.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • app/client/src/widgets/SelectWidget/component/index.tsx
  • app/client/src/widgets/MultiSelectWidget/component/index.tsx

Walkthrough

The PR forwards the isRequired prop (and isDynamicHeightEnabled for multi-select) from widget containers to their components and passes isRequired into LabelWithTooltip, enabling the required asterisk to render for select and multi-select widgets.

Changes

Cohort / File(s) Summary
Select & MultiSelect component updates
app/client/src/widgets/SelectWidget/component/index.tsx, app/client/src/widgets/MultiSelectWidget/component/index.tsx
Propagated isRequired into component props and passed isRequired={isRequired} to LabelWithTooltip; added isRequired?: boolean to MultiSelectProps.
MultiSelect widget prop forwarding
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
Forwarded isRequired and isDynamicHeightEnabled from the widget props to MultiSelectComponent in the render path.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

✨ A tiny star returns to view,
Props threaded down — the label knew,
Select and multi now show the mark,
A red asterisk lights up the dark. 🌟

🚥 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: adding the required marker display to select and multiselect widgets, which is the core objective of this PR.
Description check ✅ Passed The description covers the key aspects: what was changed (isRequired flag propagation), how it was tested (manual verification), and the linked issue reference (#41734).
Linked Issues check ✅ Passed The code changes directly address issue #41734 by propagating the isRequired flag to label components, enabling the required marker display for Select and MultiSelect widgets as specified.
Out of Scope Changes check ✅ Passed All changes are scoped to passing the isRequired flag through Select and MultiSelect widget component hierarchy to display the required marker, with no unrelated modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@Arbab1308
Copy link
Copy Markdown
Author

Opened PR #41735 to fix this

This reuses the existing required label behavior for select/multiselect

@Arbab1308
Copy link
Copy Markdown
Author

Arbab1308 commented Apr 13, 2026

@appsmith-bot
@appsmithguru (or relevant team) could someone please review? This fixes #41734.

@Arbab1308 Arbab1308 force-pushed the fix/select-required-marker branch from 2e0a3e0 to 4c9129d Compare April 13, 2026 18:04
@Arbab1308
Copy link
Copy Markdown
Author

/ok-to-test

@Arbab1308
Copy link
Copy Markdown
Author

Could a maintainer please approve workflows for this fork PR so required checks can run? Thanks!

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.

[Bug]: Required marker (*) not displayed on required select widgets

1 participant