fix(nc-gui): use radio inputs instead of select for prefilled mode select

packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue

@@ -154,7 +154,7 @@ const surveyMode = computed({
 const formPreFill = computed({
   get: () => ({
     preFillEnabled: parseProp(activeView.value?.meta)?.preFillEnabled ?? false,
-    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || t('general.default'),
+    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || PreFilledMode.Default,
   }),
   set: (value) => {
     if (!activeView.value?.meta) return
@@ -164,7 +164,7 @@ const formPreFill = computed({
     }
 
     if (formPreFill.value.preFilledMode !== value.preFilledMode) {
-      $e(`a:view:share:${value.preFillEnabled || 'default'}-prefilled-mode`)
+      $e(`a:view:share:${value.preFilledMode}-prefilled-mode`)
     }
 
     activeView.value.meta = {
@@ -361,9 +361,11 @@ watchEffect(() => {})
 
           <template v-if="activeView?.type === ViewTypes.FORM">
             <div class="flex flex-row items-center justify-between">
-              <div class="text-black">
+              <div class="text-black flex items-center space-x-1">
+                <div>
                   {{ $t('activity.surveyMode') }}
-                <NcTooltip class="inline">
+                </div>
+                <NcTooltip>
                   <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
                   <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
                 </NcTooltip>
@@ -393,15 +395,17 @@ watchEffect(() => {})
           class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
         >
           <div class="flex flex-row items-center justify-between">
-            <div class="text-black flex-1">
+            <div class="text-black flex items-center space-x-1">
+              <div>
                 {{ $t('activity.preFilledFields.title') }}
+              </div>
 
-              <NcTooltip class="inline">
+              <NcTooltip>
-                <template #title
+                <template #title>
-                  ><div class="text-center">
+                  <div class="text-center">
                     {{ $t('tooltip.preFillFormInfo') }}
-                  </div></template
+                  </div>
-                >
+                </template>
                 <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
               </NcTooltip>
             </div>
@@ -422,12 +426,10 @@ watchEffect(() => {})
             </a-switch>
           </div>
 
-          <a-select
+          <a-radio-group
             v-if="formPreFill.preFillEnabled"
-            :value="formPreFill.preFilledMode"
+            :value="formPreFill.preFilledMode || ''"
-            :allow-clear="formPreFill.preFilledMode !== t('general.default')"
+            class="nc-field-layout-list"
-            class="nc-pre-filled-mode !rounded-md w-full !mt-0"
-            dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
             data-testid="nc-modal-share-view__preFillMode"
             @update:value="
               (value) => {
@@ -438,23 +440,10 @@ watchEffect(() => {})
               }
             "
           >
-            <template #suffixIcon>
+            <a-radio v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
-              <GeneralIcon icon="arrowDown" class="text-gray-700" />
+              <div class="flex-1">{{ $t(`activity.preFilledFields.${mode || Default}`) }}</div>
-            </template>
+            </a-radio>
-            <template v-for="mode of Object.values(PreFilledMode)" :key="mode">
+          </a-radio-group>
-              <a-select-option v-if="mode !== PreFilledMode.Default" :value="mode">
-                <div class="flex gap-2 items-center">
-                  <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
-                  <component
-                    :is="iconMap.check"
-                    v-if="formPreFill.preFilledMode === mode"
-                    id="nc-selected-item-icon"
-                    class="text-primary w-4 h-4"
-                  />
-                </div>
-              </a-select-option>
-            </template>
-          </a-select>
         </div>
       </template>
     </div>
@@ -479,14 +468,4 @@ watchEffect(() => {})
     line-height: 1rem !important;
   }
 }
-
-.nc-pre-filled-mode-wrapper {
-  .nc-pre-filled-mode.ant-select {
-    @apply !p-0 mt-2;
-
-    &.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
-      @apply !border-brand-500 !shadow-none;
-    }
-  }
-}
 </style>

packages/nc-gui/components/smartsheet/Form.vue

@@ -669,7 +669,7 @@ useEventListener(
   (e: KeyboardEvent) => {
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
 
-    switch (e.key.toLowerCase()) {
+    switch (e.key?.toLowerCase()) {
       case 's':
         if (
           cmdOrCtrl &&

packages/nc-gui/lang/en.json

@@ -929,6 +929,7 @@
     "selectAllFields": "Select all fields",
     "preFilledFields": {
       "title": "Enable Pre-fill",
+      "default": "Default",
       "locked": "Lock pre-filled fields as read-only",
       "hidden": "Hide pre-filled fields",
       "lockedFieldTooltip": "Pre-filled value"
@@ -964,7 +965,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
+    "preFillFormInfo": "Generate share form URL with pre-filled field data. To get a pre-filled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },
   "placeholder": {

packages/nc-gui/lib/enums.ts

@@ -138,7 +138,7 @@ export enum ImportSource {
 }
 
 export enum PreFilledMode {
-  Default = '',
+  Default = 'default',
   Locked = 'locked',
   Hidden = 'hidden',
 }