Skip to content

Fix Trigger UI form rendering for null enum values#62060

Merged
bbovenzi merged 4 commits intoapache:mainfrom
Subham-KRLX:fix/trigger-form-enum-null-rendering
Mar 2, 2026
Merged

Fix Trigger UI form rendering for null enum values#62060
bbovenzi merged 4 commits intoapache:mainfrom
Subham-KRLX:fix/trigger-form-enum-null-rendering

Conversation

@Subham-KRLX
Copy link
Copy Markdown
Contributor

@Subham-KRLX Subham-KRLX commented Feb 17, 2026 •
edited
Loading

This PR fixes a regression where the Trigger UI form crashes if a parameter's enum contains null (used to make fields optional).

The zag-js library (used by Chakra UI's Select component) requires string values for dropdown items. When null is passed in an enum, it causes a crash with [zag-js] No value found for item {"label":null,"value":null}.

This fix:

  1. In FieldDropdown.tsx, null enum values are converted to the string "null" specifically for the UI rendering.
  2. When the value changes, the string "null" is converted back to the actual null primitive in the form state.
  3. labelLookup is updated to safely handle null keys.

I've added comprehensive unit tests in FieldDropdown.test.tsx covering:

  • Rendering mixed enums with null
  • Custom labels for null via values_display
  • Clearing selections
  • Form submission correctness

closes: #62049

Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Feb 17, 2026
@Subham-KRLX Subham-KRLX force-pushed the fix/trigger-form-enum-null-rendering branch from 8157c2b to 88a1b18 Compare February 17, 2026 04:37
jscheffl
jscheffl reviewed Feb 17, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Static checks are failing most probably you should install prekand run static checks locally. What I see as compliaints can all be auo-fixed.

Comment thread airflow-core/src/airflow/example_dags/example_params_ui_tutorial.py
Comment thread airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldDropdown.tsx Outdated
@Subham-KRLX Subham-KRLX force-pushed the fix/trigger-form-enum-null-rendering branch from 88a1b18 to 39b82c7 Compare February 18, 2026 02:16
@Subham-KRLX Subham-KRLX force-pushed the fix/trigger-form-enum-null-rendering branch from 39b82c7 to b8d6de2 Compare February 18, 2026 02:19
@jscheffl
Copy link
Copy Markdown
Contributor

jscheffl commented Feb 18, 2026

Almost looking good but with testing I got the following error:
image
How to reproduce? Open the form, select "Six" and attempt submit. I assume it is because dropdown is filled with Strings but Enum is expecting numbers in validation.

@Subham-KRLX
fix: preserve original type when selecting numeric enum in FieldDropdown
867a515 
When a numeric enum value (e.g. 6) was selected, the Select component
returned a string ('6'). The old code stored the string directly, causing
a 400 Bad Request since backend validation expects the integer 6.

Fix: look up the original typed value from schema.enum using the string
as a key, and store that instead of the raw string from the UI.

Regression test added to FieldDropdown.test.tsx.
@Subham-KRLX
Copy link
Copy Markdown
Contributor Author

Subham-KRLX commented Feb 19, 2026 •
edited
Loading

@jscheffl The root cause of this issue was that the Select component always returns string values, so numeric enum values (e.g. 6) were being submitted as the string "6" instead of the number 6, causing a validation error on submit.
To fix this when a value is selected we now look up the original typed value from schema.enum and use that instead of the raw string returned by the Select component. This ensures the correct type is preserved in the form state before submission. A regression test has also been added to prevent this from breaking again.

@Subham-KRLX
fix: resolve ts-compile-lint-ui ESLint errors in FieldDropdown
7149dea 
- Broaden ParamSchema.enum type to Array<boolean | number | string | null>
  to accurately reflect JSON Schema enum values (fixes no-unnecessary-condition)
- Update labelLookup signature to accept boolean
- Switch null-check ternaries to nullish coalescing (??) in FieldDropdown.tsx
- Add eslint-disable for no-unsafe-member-access on any-typed mockParamsDict access
- Remove stale/unused eslint-disable-next-line comments
pierrejeambrun
pierrejeambrun reviewed Feb 24, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Static checks are not happy.

Also I recommend installing the pre-commit (prek) hooks so you can have early feedback (at commit time) instead of waiting for the CI to realize that you have a formatting or linting error.

contributing-docs/08_static_code_checks.rst

jscheffl
jscheffl approved these changes Mar 1, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me looks very good now. Thanks for the (multiple) rework! LGTM so that it is fixed in next release!

@pierrejeambrun as not being UI codeowner, can you (or some other) make a final 2nd pass review prior merge?

@jscheffl jscheffl added this to the Airflow 3.1.8 milestone Mar 1, 2026
@jscheffl jscheffl added the type:bug-fix Changelog: Bug Fixes label Mar 1, 2026
@bbovenzi bbovenzi merged commit 4d3230c into apache:main Mar 2, 2026
82 checks passed
vatsrahul1001 pushed a commit that referenced this pull request Mar 3, 2026
@Subham-KRLX @vatsrahul1001
Fix Trigger UI form rendering for null enum values (#62060)
6d42c16 
* Fix Trigger UI form rendering for null enum values

* fix: preserve original type when selecting numeric enum in FieldDropdown

When a numeric enum value (e.g. 6) was selected, the Select component
returned a string ('6'). The old code stored the string directly, causing
a 400 Bad Request since backend validation expects the integer 6.

Fix: look up the original typed value from schema.enum using the string
as a key, and store that instead of the raw string from the UI.

Regression test added to FieldDropdown.test.tsx.

* fix: resolve ts-compile-lint-ui ESLint errors in FieldDropdown

- Broaden ParamSchema.enum type to Array<boolean | number | string | null>
  to accurately reflect JSON Schema enum values (fixes no-unnecessary-condition)
- Update labelLookup signature to accept boolean
- Switch null-check ternaries to nullish coalescing (??) in FieldDropdown.tsx
- Add eslint-disable for no-unsafe-member-access on any-typed mockParamsDict access
- Remove stale/unused eslint-disable-next-line comments

* fix: handle null enum values in FieldMultiSelect TypeScript types

(cherry picked from commit 4d3230c)
@vatsrahul1001 vatsrahul1001 mentioned this pull request Mar 3, 2026
Merged
vatsrahul1001 added a commit that referenced this pull request Mar 3, 2026
@vatsrahul1001 @Subham-KRLX
Fix Trigger UI form rendering for null enum values (#62060) (#62767)
fd081ba 
* Fix Trigger UI form rendering for null enum values

* fix: preserve original type when selecting numeric enum in FieldDropdown

When a numeric enum value (e.g. 6) was selected, the Select component
returned a string ('6'). The old code stored the string directly, causing
a 400 Bad Request since backend validation expects the integer 6.

Fix: look up the original typed value from schema.enum using the string
as a key, and store that instead of the raw string from the UI.

Regression test added to FieldDropdown.test.tsx.

* fix: resolve ts-compile-lint-ui ESLint errors in FieldDropdown

- Broaden ParamSchema.enum type to Array<boolean | number | string | null>
  to accurately reflect JSON Schema enum values (fixes no-unnecessary-condition)
- Update labelLookup signature to accept boolean
- Switch null-check ternaries to nullish coalescing (??) in FieldDropdown.tsx
- Add eslint-disable for no-unsafe-member-access on any-typed mockParamsDict access
- Remove stale/unused eslint-disable-next-line comments

* fix: handle null enum values in FieldMultiSelect TypeScript types

(cherry picked from commit 4d3230c)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
vatsrahul1001 added a commit that referenced this pull request Mar 4, 2026
@vatsrahul1001 @Subham-KRLX
Fix Trigger UI form rendering for null enum values (#62060) (#62767)
5c05aa3 
* Fix Trigger UI form rendering for null enum values

* fix: preserve original type when selecting numeric enum in FieldDropdown

When a numeric enum value (e.g. 6) was selected, the Select component
returned a string ('6'). The old code stored the string directly, causing
a 400 Bad Request since backend validation expects the integer 6.

Fix: look up the original typed value from schema.enum using the string
as a key, and store that instead of the raw string from the UI.

Regression test added to FieldDropdown.test.tsx.

* fix: resolve ts-compile-lint-ui ESLint errors in FieldDropdown

- Broaden ParamSchema.enum type to Array<boolean | number | string | null>
  to accurately reflect JSON Schema enum values (fixes no-unnecessary-condition)
- Update labelLookup signature to accept boolean
- Switch null-check ternaries to nullish coalescing (??) in FieldDropdown.tsx
- Add eslint-disable for no-unsafe-member-access on any-typed mockParamsDict access
- Remove stale/unused eslint-disable-next-line comments

* fix: handle null enum values in FieldMultiSelect TypeScript types

(cherry picked from commit 4d3230c)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
dominikhei pushed a commit to dominikhei/airflow that referenced this pull request Mar 11, 2026
@Subham-KRLX @dominikhei
Fix Trigger UI form rendering for null enum values (apache#62060)
5fa7627 
* Fix Trigger UI form rendering for null enum values

* fix: preserve original type when selecting numeric enum in FieldDropdown

When a numeric enum value (e.g. 6) was selected, the Select component
returned a string ('6'). The old code stored the string directly, causing
a 400 Bad Request since backend validation expects the integer 6.

Fix: look up the original typed value from schema.enum using the string
as a key, and store that instead of the raw string from the UI.

Regression test added to FieldDropdown.test.tsx.

* fix: resolve ts-compile-lint-ui ESLint errors in FieldDropdown

- Broaden ParamSchema.enum type to Array<boolean | number | string | null>
  to accurately reflect JSON Schema enum values (fixes no-unnecessary-condition)
- Update labelLookup signature to accept boolean
- Switch null-check ternaries to nullish coalescing (??) in FieldDropdown.tsx
- Add eslint-disable for no-unsafe-member-access on any-typed mockParamsDict access
- Remove stale/unused eslint-disable-next-line comments

* fix: handle null enum values in FieldMultiSelect TypeScript types
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi approved these changes

@jscheffl jscheffl jscheffl approved these changes

@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner

@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner

@guan404ming guan404ming Awaiting requested review from guan404ming guan404ming is a code owner

@vatsrahul1001 vatsrahul1001 Awaiting requested review from vatsrahul1001 vatsrahul1001 is a code owner

@choo121600 choo121600 Awaiting requested review from choo121600 choo121600 is a code owner

@pierrejeambrun pierrejeambrun Awaiting requested review from pierrejeambrun pierrejeambrun is a code owner

Assignees

No one assigned

Labels

area:UI Related to UI/UX. For Frontend Developers. type:bug-fix Changelog: Bug Fixes

Projects

None yet

Milestone

Airflow 3.1.8

Development

Successfully merging this pull request may close these issues.

Trigger UI form fails rendering if value with enum contains "null" value

4 participants

@Subham-KRLX @jscheffl @bbovenzi @pierrejeambrun