fix: ai settings page crash #15455

anadi45 · 2025-10-30T05:58:57Z

greptile-apps

Greptile Overview

Greptile Summary

Fixed crash in AI settings page when no AI models are configured by adding optional chaining to SelectControl component.

Added optional chaining (?.) when accessing selectedOption.Icon and selectedOption.label
Prevented crash when Select component passes undefined for selectedOption (occurs when options array is empty and no emptyOption provided)
Used nullish coalescing (??) to provide empty string fallback for label

Issue found:

Type signature for selectedOption prop doesn't match runtime behavior - declares as required but can receive undefined

Confidence Score: 3/5

Safe to merge with one type safety issue to address post-merge
The defensive fix resolves the immediate crash, but leaves a type mismatch between the declared interface and actual runtime behavior that should be corrected for better type safety
No files require immediate attention, but consider updating SelectControlProps type definition as a follow-up

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx	3/5	Fixed crash by adding optional chaining, but type signature needs update to match runtime behavior

Sequence Diagram

sequenceDiagram
    participant User
    participant SettingsAIAgentForm
    participant useAiModelOptions
    participant Select
    participant SelectControl

    User->>SettingsAIAgentForm: Navigate to AI settings page
    SettingsAIAgentForm->>useAiModelOptions: Get AI model options
    useAiModelOptions-->>SettingsAIAgentForm: Returns empty array []
    SettingsAIAgentForm->>Select: Render with options=[], no emptyOption
    Select->>Select: Calculate selectedOption
    Note over Select: options.find() || emptyOption || options[0]<br/>= undefined || undefined || undefined<br/>= undefined
    Select->>SelectControl: Pass selectedOption=undefined
    
    alt Before Fix
        SelectControl->>SelectControl: Access selectedOption.Icon
        Note over SelectControl: TypeError: Cannot read properties<br/>of undefined (reading 'Icon')
        SelectControl-->>User: Crash!
    else After Fix
        SelectControl->>SelectControl: Access selectedOption?.Icon
        Note over SelectControl: Returns undefined (safe)
        SelectControl->>SelectControl: Render label with selectedOption?.label ?? ''
        SelectControl-->>User: Renders empty select (no crash)
    end

Additional Comments (1)

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx, line 64 (link)

syntax: Type signature claims selectedOption is required but Select.tsx can pass undefined when options is empty and no emptyOption provided. Update type to reflect reality:

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

anadi45 · 2025-10-30T15:58:28Z

@charlesBochet please check this as well

prastoin

Hello there thanks for your contribution, left a comment

prastoin · 2025-10-31T14:27:49Z

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

        />
      ) : null}
-      <OverflowingTextWithTooltip text={selectedOption.label} />
+      <OverflowingTextWithTooltip text={selectedOption?.label ?? ''} />


Remark: Either redundant or would need to update type for this to be optional, about to double check

prastoin

Indeed the issue comes from the label being undefined, this fix is not enough

prastoin · 2025-10-31T15:12:23Z

packages/twenty-front/src/modules/ui/input/components/Select.tsx

+    );

-  const selectedOption =
-    options.find(({ value: key }) => key === value) ||


Remark: this did not handle '' or 0 atomic values correctly before same for null

prastoin

Hey @lucasbordeau could you please have a look to this when you have some free time ?

lucasbordeau · 2025-11-03T08:51:00Z

packages/twenty-front/src/modules/ui/input/components/Select.tsx

-    options.find(({ value: key }) => key === value) ||
-    emptyOption ||
-    options[0];
+    if (fromMatchingOption !== undefined) {


use !isDefined()

Would involve a regression,fromMatchingOption is nullable

export type SelectOption< Value extends string | number | boolean | null = string, > = { Icon?: IconComponent | null; label: string; value: Value; disabled?: boolean; color?: ThemeColor | 'transparent'; };

Why ? We treat null and undefined the same in the application, we shouldn't make a difference, that's why we have isDefined

Creating different code paths for null and undefined is not a good idea as we have already discussed a few months back, the default way should be to use isDefined everywhere and in some very rare edge cases to differentiate between null and undefined, not the other way around.

I modified the file and applied the correct typeguards that should be used everywhere so you can see what we expect in the app.

Also I hope that we agree on that very soon because that's how we handle nullable values since 2 years, so better not introducing and favoring another way to work with nullable now.

To go in your direction, we could separate here indeed the option.value treatment between null and undefined, but this is not required here and the code that was checking for undefined wasn't checking option.value but option object, which shouldn't be treated as undefined only but nullable with isDefined

For example in filteredOptions we could add a option.value !== null but using a isDefined(option.value) would also work great, I don't see a precise use case that would require handling null value separately here, using isDefined would work also.

That's the thing with undefined and null, from experience they should not be separated because very often they can indeed be treated the same and they should be from a maintenance and cognitive load perspective.

And you're right for empty option array, but that's again another use case than null | undefined.

See this issue : twentyhq/core-team-issues#1826

lucasbordeau · 2025-11-03T08:51:06Z

packages/twenty-front/src/modules/ui/input/components/Select.tsx

+      return fromMatchingOption;
+    }
+
+    if (emptyOption !== undefined) {


Same answer

lucasbordeau

LGTM

github-actions · 2025-11-03T15:37:28Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:30291

This environment will automatically shut down when the PR is closed or after 5 hours.

github-actions · 2025-11-03T15:38:15Z

Thanks @anadi45 for your contribution!
This marks your 6th PR on the repo. You're top 5% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

Fix optional chaining in SelectControl component

105d48c

greptile-apps bot reviewed Oct 30, 2025

View reviewed changes

PriyanshuPandey92 mentioned this pull request Oct 30, 2025

Fix Advanced-filter Opportunity Page Crash #15456

Closed

Merge branch 'main' into fix-ai-settings-crash

dac56fc

Merge branch 'main' into fix-ai-settings-crash

78db5f9

prastoin reviewed Oct 31, 2025

View reviewed changes

chore

a8693e1

prastoin reviewed Oct 31, 2025

View reviewed changes

fix(front): lock devx from ui component

156fda1

prastoin reviewed Oct 31, 2025

View reviewed changes

charlesBochet self-assigned this Nov 2, 2025

charlesBochet added the -PR: awaiting review label Nov 2, 2025

lucasbordeau reviewed Nov 3, 2025

View reviewed changes

lucasbordeau added 5 commits November 3, 2025 15:50

Applied correct type guards

41dc3c2

Fix

91f3521

Allow for empty option array without crashing.

1ed6333

Fixed stories

1378aa4

Merge branch 'main' into fix-ai-settings-crash

fb1c038

lucasbordeau approved these changes Nov 3, 2025

View reviewed changes

lucasbordeau merged commit 4541149 into twentyhq:main Nov 3, 2025
54 checks passed

fix: ai settings page crash #15455

fix: ai settings page crash #15455

Uh oh!

Conversation

anadi45 commented Oct 30, 2025

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Greptile Overview

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Sequence Diagram

Additional Comments (1)

Uh oh!

anadi45 commented Oct 30, 2025

Uh oh!

prastoin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prastoin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prastoin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucasbordeau Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucasbordeau Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucasbordeau Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucasbordeau left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Nov 3, 2025

Uh oh!

github-actions bot commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

greptile-apps bot left a comment •

edited

Loading

lucasbordeau Nov 3, 2025 •

edited

Loading

lucasbordeau Nov 3, 2025 •

edited

Loading

lucasbordeau Nov 3, 2025 •

edited

Loading