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

[Arbab1308]

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

• Fixes [Bug]: Required marker (*) not displayed on required select widgets #41734

Automation

/ok-to-test tags="@tag.All"

Summary by CodeRabbit

• Improvements
  • Multi-select and select form fields now consistently show required-field indicators on their labels for clearer guidance.
  • Form validation and label display better reflect required status, reducing confusion when filling forms.

[coderabbitai]

Walkthrough

The PR forwards the isRequired prop from Select and MultiSelect widget containers into their components and passes isRequired to LabelWithTooltip; MultiSelectProps now includes an optional isRequired?: boolean.

Changes

Cohort / File(s)	Summary
Select component app/client/src/widgets/SelectWidget/component/index.tsx	Passes isRequired={isRequired} into LabelWithTooltip so the label can render the required marker.
MultiSelect component app/client/src/widgets/MultiSelectWidget/component/index.tsx	Added isRequired?: boolean to MultiSelectProps and forwards isRequired to LabelWithTooltip.
MultiSelect widget (container → component) app/client/src/widgets/MultiSelectWidget/widget/index.tsx	Forwards the widget's isRequired prop into MultiSelectComponent so the component receives the required state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A tiny star returns to view,
Props threaded down — the label knew,
Selects and multis claim their part,
A red asterisk finds its heart. ✨

🚥 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 clearly and concisely summarizes the main change: fixing the missing required marker display for select and multiselect widgets.
Linked Issues check	✅ Passed	The PR properly addresses issue #41734 by ensuring the isRequired flag propagates from Select and MultiSelect widgets to their label components, enabling the required marker display.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the required marker display for Select and MultiSelect widgets. The PR notes mention removing a duplicate isRequired prop, which is a focused cleanup related to the objective.
Description check	✅ Passed	The PR description covers all essential elements: issue reference, clear explanation of changes, testing approach, and automation tag.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Arbab1308]

Opened PR #41735 to fix this

This reuses the existing required label behavior for select/multiselect

[Arbab1308]

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

[Arbab1308]

/ok-to-test

[Arbab1308]

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

[coderabbitai]

♻️ Duplicate comments (1)

app/client/src/widgets/MultiSelectWidget/widget/index.tsx (1)

566-567: ⚠️ Potential issue | 🔴 Critical

Duplicate isRequired prop — please remove one.

isRequired={this.props.isRequired} is set twice on MultiSelectComponent. React will silently keep only the last occurrence, and eslint-plugin-react's jsx-no-duplicate-props rule will fail the lint step. As per coding guidelines, "Ensure code passes ESLint validation using yarn run lint".

🛠️ Proposed fix

         dropdownStyle={{
           zIndex: Layers.dropdownModalWidget,
         }}
-        isRequired={this.props.isRequired}
         isRequired={this.props.isRequired}
         isValid={this.props.isValid}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/client/src/widgets/MultiSelectWidget/widget/index.tsx` around lines 566 -
567, Remove the duplicated prop on MultiSelectComponent: there are two identical
isRequired={this.props.isRequired} props in the JSX (inside the render of the
MultiSelectWidget component), so delete one occurrence so isRequired is only
passed once; ensure no other duplicate props remain on MultiSelectComponent to
satisfy jsx-no-duplicate-props linting.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@app/client/src/widgets/MultiSelectWidget/widget/index.tsx`:
- Around line 566-567: Remove the duplicated prop on MultiSelectComponent: there
are two identical isRequired={this.props.isRequired} props in the JSX (inside
the render of the MultiSelectWidget component), so delete one occurrence so
isRequired is only passed once; ensure no other duplicate props remain on
MultiSelectComponent to satisfy jsx-no-duplicate-props linting.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6980b87e-c8ae-4507-a371-013afd82769e

📥 Commits

Reviewing files that changed from the base of the PR and between 4c9129d and 07d7d13.

📒 Files selected for processing (1)

• app/client/src/widgets/MultiSelectWidget/widget/index.tsx

[sebastianiv21]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/24904467941.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41735.
recreate: .
base-image-tag: .

[Arbab1308]

/ok-to-test

[Arbab1308]

Hey @sebastianiv21 — good catch. I’ve pushed an update removing the unrelated isDynamicHeightEnabled prop from the MultiSelect widget to keep the PR scoped to the required-marker fix.
Could you please refresh and take another look when you get a chance?

[Arbab1308]

@sebastianiv21 is it all good to merger ??

also should i resolve the conversation ?

[sebastianiv21]

@Arbab1308 We have to run the test suite and then it should be ready to merge

[sebastianiv21]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/25061271920.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41735.
recreate: .
base-image-tag: .

[github-actions]

Deploy-Preview-URL: https://ce-41735.dp.appsmith.com

[Arbab1308]

@Arbab1308 We have to run the test suite and then it should be ready to merge

okayy let me know if anything else is there

[sebastianiv21]

@Arbab1308 We have to run the test suite and then it should be ready to merge

okayy let me know if anything else is there

@Arbab1308 You can test your changes here

With the current changes, the asterisk is only showing for the Select widget

[github-actions]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.