Fix ColumnType command input (#42292)

## Context

Started to notice a spike of this error happening on Sentry:
`TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is
not of type 'Node'.`

Checking the stack trace points the error to `cmdk` - the most recent
change related to `cmdk` was this PR
[here](https://github.com/supabase/supabase/pull/42277)
^ Not entirely suer if it was the cause tbh but it did help pinpoint the
error locally that it was happening when trying to search in the
`ColumnType` popover

From what I can tell - it's happening because of the `CommandItem`
"Other types" being rendered outside of a `CommandGroup`

Am removing that as the fix + add `heading` to the `CommandGroups` so
that it looks nicer anyways
<img width="506" height="333" alt="image"
src="https://github.com/user-attachments/assets/34623cfa-39be-4a02-9579-15303d442794"
/>

## To test

Can reproduce by trying to search in the ColumnType of the table side
panel editor


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Improvements**
* Enhanced the column type selector with better visual organization.
Data types are now grouped into clearly labeled sections ("Postgres data
types" and "Other types") with visual separators, making it easier to
navigate and select the appropriate column type when editing tables.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Joshen Lim authored and GitHub committed 2026-01-30 01:12:02 +08:00
1 parent 8b2dcaa352
commit ca7e697c41
1 file changed
+6 -4
@@ -22,6 +22,7 @@ import {
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command_Shadcn_,
CriticalIcon,
Input,
@@ -191,13 +192,13 @@ const ColumnType = ({
placeholder="Search types..."
// [Joshen] Addresses style issues when this component is being used in the old Form component
// Specifically in WrapperDynamicColumns - can be cleaned up once we're no longer using that
className="!bg-transparent focus:!shadow-none focus:!ring-0"
className="!bg-transparent focus:!shadow-none focus:!ring-0 text-xs"
/>
<CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
<CommandList_Shadcn_>
<ScrollArea className="h-[240px]">
<CommandGroup_Shadcn_>
<CommandGroup_Shadcn_ heading="Postgres data types">
{POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
<CommandItem_Shadcn_
key={option.name}
@@ -219,10 +220,11 @@ const ColumnType = ({
</CommandItem_Shadcn_>
))}
</CommandGroup_Shadcn_>
{enumTypes.length > 0 && (
<>
<CommandItem_Shadcn_>Other types</CommandItem_Shadcn_>
<CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Other types">
{enumTypes.map((option) => (
<CommandItem_Shadcn_
key={option.id}