From ca7e697c417c046db5d7100b6cfac25b66b26b2e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 30 Jan 2026 01:12:02 +0800
Subject: [PATCH] Fix ColumnType command input (#42292)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 .../SidePanelEditor/ColumnEditor/ColumnType.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index 4206f44a607..eb87f92a313 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -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}