fix(tables): drop removed select options from cells instead of stale pills

When an option is deleted, cells that referenced it previously rendered a gray
fallback pill labeled with the raw internal id. They now drop the orphaned id
and fall back to empty ("None"). Editors seed their selection from the still-
valid ids too, so editing/saving such a cell writes the cleaned value.

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/index.ts

@@ -1,3 +1,3 @@
 export { SelectOptionsEditor } from './select-options-editor'
-export { resolveSelectOptions, SelectPill, toSelectedIds } from './select-pill'
+export { resolveSelectOptions, SelectPill, selectedOptionIds, toSelectedIds } from './select-pill'
 export { SelectValueEditor } from './select-value-editor'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-pill.tsx

@@ -3,24 +3,29 @@
 import { Badge, cn } from '@sim/emcn'
 import type { ColumnDefinition, SelectOption } from '@/lib/table'
 
-/** Reads the selected option ids from a stored cell value of either select type. */
+/** Reads the raw stored option ids from a cell value (single string or array). */
 export function toSelectedIds(value: unknown): string[] {
   if (Array.isArray(value)) return value.filter((v): v is string => typeof v === 'string')
   if (typeof value === 'string' && value !== '') return [value]
   return []
 }
 
 /**
- * Resolves the stored ids of a `select`/`multiselect` cell to their declared
- * options, preserving selection order. An id with no matching option (stale
- * after an option was deleted) resolves to a neutral gray fallback so the cell
- * never renders blank.
+ * Resolves a `select` cell's stored ids to their declared options, preserving
+ * selection order. An id with no matching option — stale after that option was
+ * deleted — is dropped, so the cell falls back to empty ("None") rather than
+ * showing an orphaned reference.
  */
 export function resolveSelectOptions(column: ColumnDefinition, value: unknown): SelectOption[] {
-  const options = column.options ?? []
-  return toSelectedIds(value).map(
-    (id) => options.find((o) => o.id === id) ?? { id, name: id, color: 'gray' }
-  )
+  const byId = new Map((column.options ?? []).map((o) => [o.id, o]))
+  return toSelectedIds(value)
+    .map((id) => byId.get(id))
+    .filter((o): o is SelectOption => o != null)
+}
+
+/** The still-valid option ids of a cell (orphaned/removed ids dropped). */
+export function selectedOptionIds(column: ColumnDefinition, value: unknown): string[] {
+  return resolveSelectOptions(column, value).map((o) => o.id)
 }
 
 interface SelectPillProps {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from 'react'
 import { ChipDropdown } from '@sim/emcn'
 import type { ColumnDefinition } from '@/lib/table'
-import { SelectPill, toSelectedIds } from './select-pill'
+import { SelectPill, selectedOptionIds } from './select-pill'
 
 interface SelectValueEditorProps {
   column: ColumnDefinition
@@ -43,7 +43,7 @@ export function SelectValueEditor({
     return (
       <ChipDropdown
         multiple
-        value={toSelectedIds(value)}
+        value={selectedOptionIds(column, value)}
         // A required multiselect can't be emptied — ignore the toggle that would
         // remove the last option, since an empty selection can never be committed.
         onChange={(ids) => {
@@ -71,7 +71,7 @@ export function SelectValueEditor({
 
   return (
     <ChipDropdown
-      value={toSelectedIds(value)[0] ?? CLEAR_VALUE}
+      value={selectedOptionIds(column, value)[0] ?? CLEAR_VALUE}
       onChange={(id) => onChange(id === CLEAR_VALUE ? null : id)}
       options={singleOptions}
       placeholder='Select an option'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -26,7 +26,7 @@ import {
   storageToDisplay,
   todayLocalCalendarDate,
 } from '../../../utils'
-import { SelectPill, toSelectedIds } from '../../select-field'
+import { SelectPill, selectedOptionIds } from '../../select-field'
 
 interface InlineEditorProps {
   value: unknown
@@ -346,7 +346,7 @@ function InlineTextEditor({
 function InlineSelectEditor({ value, column, onSave, onCancel }: InlineEditorProps) {
   const isMulti = !!column.multiple
   const allOptions = column.options ?? []
-  const [draft, setDraft] = useState<string[]>(() => toSelectedIds(value))
+  const [draft, setDraft] = useState<string[]>(() => selectedOptionIds(column, value))
   const [open, setOpen] = useState(true)
   const latestRef = useRef(draft)
   const doneRef = useRef(false)