chore: better ui to remove options in multiselect

[harshtandiya]

Summary by CodeRabbit

• New Features

  • Expanded edit mode support to additional form components
  • Added ability to remove options from multiselect fields during editing

• Style

  • Updated input field styling to use full-width layout

[coderabbitai]

📝 Walkthrough

Walkthrough

A new inEditMode prop is introduced and propagated through the component hierarchy (RenderField → FieldRenderer → Multiselect). The Multiselect component is enhanced to render a remove button when in edit mode, allowing deletion of options from the field definition. Minor styling adjustment updates FieldLabel input width behavior.

Changes

Cohort / File(s)	Summary
Edit Mode Prop Infrastructure frontend/src/components/RenderField.vue, frontend/src/components/builder/FieldRenderer.vue	Added inEditMode boolean prop to RenderField with default false, and forwarded it through FieldRenderer's description-first layout branch to enable downstream edit mode awareness.
Multiselect Edit Mode Enhancement frontend/src/components/fields/multiselect/Multiselect.vue	Added inEditMode and field props; restructured option rows to include conditional remove button (visible in edit mode); implemented removeOption() to delete options from field definition and update selections; adjusted styling to suppress interactive cursor/hover states during edit mode.
Field Label Styling frontend/src/components/builder/FieldLabel.vue	Changed input width class from w-fit to w-full for full container expansion.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant FieldRenderer
    participant RenderField
    participant Multiselect
    
    User->>FieldRenderer: Component mounted with inEditMode=true
    FieldRenderer->>RenderField: Pass inEditMode prop
    RenderField->>Multiselect: Render with :in-edit-mode="true"
    Multiselect->>Multiselect: Render remove button for each option
    
    User->>Multiselect: Click remove button on option
    Multiselect->>Multiselect: removeOption(option)
    Note over Multiselect: Parse field.options (newline-separated)<br/>Remove matching option<br/>Update field.options and selected
    Multiselect->>User: Option removed from field definition

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A prop hops down the component tree,

inEditMode sets the field folk free,

With X-button clicked, options take flight,

The multiselect dances left and right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is empty; it only contains the template placeholders without any actual content filled in by the author.	Fill in the Summary section explaining the change and reason, complete the Testing checklist with actual test results, and add screenshots of the UI changes for the multiselect option removal feature.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a better UI for removing options in multiselect, which is the primary feature introduced across the modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/multiselect

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

frontend/src/components/builder/FieldLabel.vue (1)

25-25: Prefer flex sizing for the editable label width.

w-full can crowd the required asterisk in this flex row. flex-1 min-w-0 keeps the input full-width within the remaining space and shrinks cleanly on narrow builder panels.

Suggested tweak

-            class="bg-transparent border-none outline-none text-base focus:ring-0 w-full px-0 py-1"
+            class="bg-transparent border-none outline-none text-base focus:ring-0 flex-1 min-w-0 px-0 py-1"

🤖 Prompt for AI Agents

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

In `@frontend/src/components/builder/FieldLabel.vue` at line 25, The editable
label's class uses w-full which can push the required asterisk out in the flex
row; update the element in FieldLabel.vue that has class="bg-transparent
border-none outline-none text-base focus:ring-0 w-full px-0 py-1" to use flex
sizing instead (replace w-full with "flex-1 min-w-0") so the input consumes
remaining space and can shrink properly next to the asterisk in the flex
container.

frontend/src/components/builder/FieldRenderer.vue (1)

53-58: Forward inEditMode through every RenderField branch.

Line 80 wires edit mode only for description-first. Since RenderField now supports this prop generally, other layouts will silently render child field components with inEditMode = false if they start consuming edit-mode behavior.

Suggested consistency pass

             <RenderField
                 v-model="modelValue"
                 :field="fieldData"
+                :in-edit-mode="inEditMode"
                 :class="{ 'pointer-events-none mt-1': inEditMode }"
                 :disabled="disabled"
             />
@@
             <RenderField
                 v-model="modelValue"
                 :field="fieldData"
+                :in-edit-mode="inEditMode"
                 :class="{ 'pointer-events-none': inEditMode }"
                 :disabled="disabled"
             />
@@
             <RenderField
                 v-model="modelValue"
                 :field="fieldData"
+                :in-edit-mode="inEditMode"
                 :class="{ 'pointer-events-none': inEditMode }"
                 :disabled="disabled"
                 :options="selectOptions"

Also applies to: 77-83, 93-98, 119-125

🤖 Prompt for AI Agents

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

In `@frontend/src/components/builder/FieldRenderer.vue` around lines 53 - 58, The
RenderField usages are not consistently passing the inEditMode prop so only the
description-first branch receives edit-mode state; update every RenderField
instance (the ones using v-model="modelValue", :field="fieldData", :class=...,
and :disabled="disabled") to also forward :inEditMode="inEditMode" so all layout
branches receive the prop; ensure the same change is applied to the other
RenderField occurrences noted (the blocks around the existing RenderField calls)
so child field components observe edit-mode consistently.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@frontend/src/components/fields/multiselect/Multiselect.vue`:
- Around line 32-37: The removeOption function currently mutates
props.field.options directly and can be invoked when props.field is undefined;
change it to compute the new options string and emit an update event instead of
mutating props (use the component's emit to fire update:field with a shallow
copy like { ...props.field, options: newOptions }) and update local selected
state as needed; also guard the remove button so it only renders/calls
removeOption when props.field is truthy (or return early) to avoid no-op
clicks—refer to removeOption, props.field, selected and the update:field
convention used in MultiselectBuilderExtras.vue / FieldRenderer.vue.

---

Nitpick comments:
In `@frontend/src/components/builder/FieldLabel.vue`:
- Line 25: The editable label's class uses w-full which can push the required
asterisk out in the flex row; update the element in FieldLabel.vue that has
class="bg-transparent border-none outline-none text-base focus:ring-0 w-full
px-0 py-1" to use flex sizing instead (replace w-full with "flex-1 min-w-0") so
the input consumes remaining space and can shrink properly next to the asterisk
in the flex container.

In `@frontend/src/components/builder/FieldRenderer.vue`:
- Around line 53-58: The RenderField usages are not consistently passing the
inEditMode prop so only the description-first branch receives edit-mode state;
update every RenderField instance (the ones using v-model="modelValue",
:field="fieldData", :class=..., and :disabled="disabled") to also forward
:inEditMode="inEditMode" so all layout branches receive the prop; ensure the
same change is applied to the other RenderField occurrences noted (the blocks
around the existing RenderField calls) so child field components observe
edit-mode consistently.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 58f71d47-a33f-4ae9-a31b-0b354ba1bd40

📥 Commits

Reviewing files that changed from the base of the PR and between 96a0f94 and cbfaffb.

📒 Files selected for processing (4)

• frontend/src/components/RenderField.vue
• frontend/src/components/builder/FieldLabel.vue
• frontend/src/components/builder/FieldRenderer.vue
• frontend/src/components/fields/multiselect/Multiselect.vue

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Inspect field update propagation for Multiselect option removal.
# Expected: Either Multiselect option removal is explicitly forwarded via update:field,
# or parent builder state intentionally persists nested field mutations.

rg -n -C3 \
  'removeOption|props\.field\.options|@update:field|defineEmits|<RenderField' \
  --iglob '*.vue'

Repository: BuildWithHussain/forms_pro

Length of output: 10207

---

Emit field updates instead of mutating nested props.

Line 35 mutates props.field.options directly, bypassing Vue's event propagation pattern. Additionally, the remove button renders when inEditMode is true even if field is undefined, making the click handler a no-op. Either emit an update:field event up through the component hierarchy (as seen in MultiselectBuilderExtras.vue and expected by FieldRenderer.vue), or guard the button with field.

Suggested refactor

+const emit = defineEmits<{
+    "update:field": [value: { options?: string } & Record<string, unknown>];
+}>();
+
 function removeOption(option: string) {
     if (!props.field) return;
     const items = (props.field.options ?? "").split("\n").filter(Boolean);
-    props.field.options = items.filter((v: string) => v !== option).join("\n");
+    emit("update:field", {
+        ...props.field,
+        options: items.filter((v: string) => v !== option).join("\n"),
+    });
     selected.value = selected.value.filter((v) => v !== option);
 }
@@
             <Button
-                v-if="inEditMode"
+                v-if="inEditMode && field"

Ensure parent components (RenderField/FieldRenderer) forward the event up the hierarchy with @update:field="...".

🤖 Prompt for AI Agents

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

In `@frontend/src/components/fields/multiselect/Multiselect.vue` around lines 32 -
37, The removeOption function currently mutates props.field.options directly and
can be invoked when props.field is undefined; change it to compute the new
options string and emit an update event instead of mutating props (use the
component's emit to fire update:field with a shallow copy like { ...props.field,
options: newOptions }) and update local selected state as needed; also guard the
remove button so it only renders/calls removeOption when props.field is truthy
(or return early) to avoid no-op clicks—refer to removeOption, props.field,
selected and the update:field convention used in MultiselectBuilderExtras.vue /
FieldRenderer.vue.