fix: allow typing in relationship input field#2943
fix: allow typing in relationship input field#2943Srvankit wants to merge 1 commit intoappwrite:mainfrom
Conversation
WalkthroughThe Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Greptile SummaryThis PR attempts to fix a regression where users could not type or paste values into the relationship input field by replacing Key issues:
The fix should be targeted: either modify the relationship-specific call sites in Confidence Score: 1/5Not safe to merge — the change breaks dropdown functionality across ~69 components app-wide and silently drops on:change callbacks. A P0 issue exists: removing the options prop from a shared component that the entire app uses as a dropdown select destroys correct behaviour for boolean/enum/filter/limit/index-type inputs. A P1 issue also exists (on:change forwarding removed), which breaks state-update callbacks in relationship and other components. These are present, definite defects on shipped code paths, not speculative concerns. src/lib/elements/forms/inputSelect.svelte — core change; all ~69 consuming files are indirectly affected. Important Files Changed
Reviews (1): Last reviewed commit: "fix: allow typing in relationship input ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <Input | ||
| {id} | ||
| {label} | ||
| {placeholder} | ||
| {disabled} | ||
| {autofocus} | ||
| {leadingIcon} | ||
| helper={error ?? helper} | ||
| {required} | ||
| state={error ? 'error' : 'default'} | ||
| data-command-center-ignore | ||
| on:invalid={handleInvalid} | ||
| on:input={(e) => value = e.target.value} | ||
| bind:value> | ||
| <slot name="info" slot="info" /> | ||
| </Input.Select> | ||
| </Input> |
There was a problem hiding this comment.
inputSelect.svelte is a shared component used in ~69 files throughout the app. Replacing Input.Select with a plain Input and removing the options prop means every caller that passes options to <InputSelect> will silently receive a plain text field instead of a dropdown — with all option data being silently discarded.
Affected components (non-exhaustive):
columns/types/boolean.svelte— true/false selection becomes free-text input, allowing invalid valuescolumns/types/enum.svelte— enum value selection breaks; users can type arbitrary strings not in the enumlib/components/filters/content.svelteandfiltersModal.svelte— filter operator/value dropdowns breaklib/components/limit.svelte— row limit picker becomes free-textdatabases/.../createColumn.svelte— column type picker breaksdatabases/.../indexes/create.svelte— index type picker breaks- Every
InputSelectcall withoptionsinrelationship.svelte(to-many section, lines 303, 322, 352) — these now show plain text inputs too
The intent of this PR (restoring typing ability in the relationship field) is valid, but it should target only the relevant relationship input rather than changing this shared wrapper component. The fix should be applied directly in relationship.svelte where the relationship-specific InputSelect calls exist, or a separate component/prop should be introduced.
| on:invalid={handleInvalid} | ||
| on:input={(e) => value = e.target.value} |
There was a problem hiding this comment.
on:change no longer forwarded — breaks all callers that depend on it
The original component forwarded on:change to parent components. This PR removes that forwarding and only handles on:input internally. All existing callers that pass on:change handlers will receive no event.
For example, in relationship.svelte:
<InputSelect ... on:change={() => { if (!relatedList[0]) relatedList = [''] ; updateRelatedList(); }} />
<InputSelect ... on:change={updateRelatedList} />These handlers won't fire, so relatedList and value will never be updated when the user selects/types a value.
Also in lib/components/limit.svelte:
<InputSelect id="rows" {options} bind:value={limit} on:change={limitChange} />The row limit change callback will be silently dropped.
The on:change event should be forwarded alongside on:input:
| on:invalid={handleInvalid} | |
| on:input={(e) => value = e.target.value} | |
| on:invalid={handleInvalid} | |
| on:input={(e) => value = (e.target as HTMLInputElement).value} | |
| on:change | |
| bind:value> |
| state={error ? 'error' : 'default'} | ||
| data-command-center-ignore | ||
| on:invalid={handleInvalid} | ||
| on:input={(e) => value = e.target.value} |
There was a problem hiding this comment.
e.target is not typed as HTMLInputElement
e.target is typed as EventTarget | null, so accessing .value directly is not type-safe and will cause a TypeScript error.
| on:input={(e) => value = e.target.value} | |
| on:input={(e) => value = (e.target as HTMLInputElement).value} |
| <Input | ||
| {id} | ||
| {label} | ||
| {placeholder} | ||
| {disabled} | ||
| {autofocus} | ||
| {leadingIcon} | ||
| helper={error ?? helper} | ||
| {required} | ||
| state={error ? 'error' : 'default'} | ||
| data-command-center-ignore | ||
| on:invalid={handleInvalid} | ||
| on:input={(e) => value = e.target.value} | ||
| bind:value> | ||
| <slot name="info" slot="info" /> |
There was a problem hiding this comment.
optionalText prop is no longer passed to the inner component
The optionalText prop is declared on line 10 and was passed to Input.Select in the original code. It is not forwarded to the new Input component, so any caller relying on optional text display (e.g. "optional" labels) will silently lose that feature.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/lib/elements/forms/inputSelect.svelte`:
- Around line 40-55: The component currently exports optionalText but never
passes it to the child <Input>, so callers’ optional-labels stop rendering; fix
by either forwarding optionalText into the <Input> (e.g., add
optionalText={optionalText} to the <Input> element in inputSelect.svelte) or
remove the optionalText export from this component and update the public
API/consumers accordingly; locate the optionalText export in this file and the
<Input> usage to implement the chosen change.
- Around line 40-55: The change replaced the shared select wrapper (InputSelect)
with a plain text <Input>, which breaks select-specific features (options,
on:select, non-string option values); restore the original select element and
its select-specific behavior (ensure props like options, on:select, bind:value
and handlers such as handleInvalid remain functional and the info slot stays in
place). If free-form text is needed only for the relationship field, add an
explicit opt-in prop (e.g., allowCustom or freeForm) to InputSelect and only
render the plain <Input> when that prop is true; otherwise render the select
component (preserving option value types and select events).
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e756d2d1-93d4-4810-9207-cf8677df367a
📒 Files selected for processing (1)
src/lib/elements/forms/inputSelect.svelte
| <Input | ||
| {id} | ||
| {label} | ||
| {placeholder} | ||
| {disabled} | ||
| {autofocus} | ||
| {leadingIcon} | ||
| helper={error ?? helper} | ||
| {required} | ||
| state={error ? 'error' : 'default'} | ||
| data-command-center-ignore | ||
| on:invalid={handleInvalid} | ||
| on:input={(e) => value = e.target.value} | ||
| bind:value> | ||
| <slot name="info" slot="info" /> | ||
| </Input.Select> | ||
| </Input> |
There was a problem hiding this comment.
optionalText no longer has any effect.
Line 10 still exposes optionalText, but the new <Input> call never uses it. Any caller passing that prop will stop rendering its optional-label text with no compile-time signal. Either keep honoring the prop here or remove/update the public API in the same change.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/lib/elements/forms/inputSelect.svelte` around lines 40 - 55, The
component currently exports optionalText but never passes it to the child
<Input>, so callers’ optional-labels stop rendering; fix by either forwarding
optionalText into the <Input> (e.g., add optionalText={optionalText} to the
<Input> element in inputSelect.svelte) or remove the optionalText export from
this component and update the public API/consumers accordingly; locate the
optionalText export in this file and the <Input> usage to implement the chosen
change.
Don't convert the shared select wrapper into a plain text input.
InputSelect is still used as a real dropdown in src/lib/components/billing/selectPaymentMethod.svelte:59-75, src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte:105-115, src/routes/(console)/organization-[organization]/members/edit.svelte:81-93, and src/routes/(console)/organization-[organization]/createMember.svelte:73-85. With this change those screens silently ignore options, lose select-specific behavior like on:select, and coerce non-string option values into plain text. Please scope the free-form behavior to the relationship field, or make it opt-in instead of changing the shared default.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/lib/elements/forms/inputSelect.svelte` around lines 40 - 55, The change
replaced the shared select wrapper (InputSelect) with a plain text <Input>,
which breaks select-specific features (options, on:select, non-string option
values); restore the original select element and its select-specific behavior
(ensure props like options, on:select, bind:value and handlers such as
handleInvalid remain functional and the info slot stays in place). If free-form
text is needed only for the relationship field, add an explicit opt-in prop
(e.g., allowCustom or freeForm) to InputSelect and only render the plain <Input>
when that prop is true; otherwise render the select component (preserving option
value types and select events).
1 participant
This fixes the issue where users were unable to type or paste values into the relationship field.
Previously, the component used
Input.Select, which restricted input to a dropdown-only section. This prevented manual entry of IDs.This PR replaces
Input.SelectwithInput, restoring the ability to type and paste values, matching the behaviour before v6.##Changes:
Input-SelectwithInputoptionsprop##Issue
Closes #2119
Summary by CodeRabbit