diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index fc6f147cf5..c7d731c906 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -215,10 +215,15 @@ watch(vModel.value, (next) => {
                 overlay-class-name="nc-dropdown-select-color-options"
               >
                 <template #overlay>
-                  <LazyGeneralColorPicker v-model="element.color" :pick-button="true" @close-modal="colorMenus[index] = false" />
+                  <LazyGeneralColorPicker
+                    v-model="element.color"
+                    :pick-button="true"
+                    @close-modal="colorMenus[index] = false"
+                    @input="(el:string) => (element.color = el)"
+                  />
                 </template>
                 <MdiArrowDownDropCircle
-                  class="mr-2 text-[1.5em] outline-0 hover:!text-[1.75em] hover:cursor-pointer"
+                  class="mr-2 text-[1.5em] outline-0 hover:!text-[1.75em] cursor-pointer"
                   :class="{ 'text-[1.75em]': colorMenus[index] }"
                   :style="{ color: element.color }"
                 />