From 43cac055116f8d1faaf3091ec49175e17435240a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E5=B0=8F=E9=B8=AD?= <tangtang1251@qq.com>
Date: Fri, 28 Aug 2026 18:04:24 +0800
Subject: [PATCH] fix: render select labels before dropdown opens

base-ui's Select.Value falls back to the raw option value when no items
mapping or children are provided, so selects whose option labels differ
from their values (translated or human-readable labels) showed the raw
value (e.g. "vault-transit", "async", "Ki") until the dropdown was
first opened.

Pass the current label as SelectValue children, falling back to the
placeholder when no value is selected, across the SSE KMS backend
select, bucket policy/encryption/KMS-key selects, lifecycle object
version selects, site replication sync/TLS selects, and bucket
replication mode/TLS/bandwidth-unit selects.

Selects whose labels equal their values (event ARNs, storage classes,
lifecycle tiers, pagination sizes) are unchanged.
---
 app/(dashboard)/sse/page.tsx              | 11 +++++++++-
 components/buckets/info.tsx               | 26 ++++++++++++++++++++---
 components/lifecycle/new-form.tsx         |  8 +++++--
 components/replication/edit-form.tsx      | 12 ++++++++---
 components/replication/new-form.tsx       | 12 ++++++++---
 components/site-replication/edit-form.tsx | 14 ++++++++++--
 components/site-replication/new-form.tsx  |  8 ++++++-
 7 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/app/(dashboard)/sse/page.tsx b/app/(dashboard)/sse/page.tsx
index 89ec4288..e7c3f1e1 100644
--- a/app/(dashboard)/sse/page.tsx
+++ b/app/(dashboard)/sse/page.tsx
@@ -936,6 +936,13 @@ export default function SSEPage() {
       : t("Changing KMS service state may briefly interrupt SSE requests.")
   const isPendingDefaultKey = pendingKeyAction?.key.key_id === status?.config_summary?.default_key_id
 
+  const backendTypeLabels: Record<ConfigFormState["backendType"], string> = {
+    unsupported: t("Unsupported KMS backend"),
+    local: t("Local filesystem"),
+    "vault-kv2": t("HashiCorp Vault KV2"),
+    "vault-transit": t("HashiCorp Vault Transit Engine"),
+    static: t("Static single-key (built-in)"),
+  }
   const mutationLocked = Boolean(activeMutation || statusError || loadingStatus)
   const unsupportedKmsReadOnly = formState.backendType === "unsupported"
   const staticKmsReadOnly = hasConfiguration && formState.backendType === "static"
@@ -1160,7 +1167,9 @@ export default function SSEPage() {
                           disabled={formDisabled || localKmsConfigured}
                         >
                           <SelectTrigger id="kmsBackend" className="w-full" aria-label={t("KMS Backend")}>
-                            <SelectValue placeholder={t("Select backend type")} />
+                            <SelectValue placeholder={t("Select backend type")}>
+                              {backendTypeLabels[formState.backendType] ?? null}
+                            </SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {formState.backendType === "unsupported" ? (
diff --git a/components/buckets/info.tsx b/components/buckets/info.tsx
index 6e0fa3fa..26972780 100644
--- a/components/buckets/info.tsx
+++ b/components/buckets/info.tsx
@@ -714,6 +714,17 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
     { href: "#automation", label: t("Automation") },
   ]
 
+  const policyLabels: Partial<Record<BucketPolicyType | "custom", string>> = {
+    public: t("Public"),
+    private: t("Private"),
+    custom: t("Custom"),
+  }
+  const encryptionTypeLabels: Record<string, string> = {
+    disabled: t("Disabled"),
+    "SSE-KMS": "SSE-KMS",
+    "SSE-S3": "SSE-S3",
+  }
+
   if (initialLoading) {
     return (
       <div className="flex items-center justify-center py-16" role="status" aria-live="polite">
@@ -1074,7 +1085,9 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                   }}
                 >
                   <SelectTrigger id="bucket-policy-type" className="w-full" aria-label={t("Policy")}>
-                    <SelectValue placeholder={t("Please select policy")} />
+                    <SelectValue placeholder={t("Please select policy")}>
+                      {policyLabels[policyFormPolicy] ?? policyFormPolicy}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="public">{t("Public")}</SelectItem>
@@ -1150,7 +1163,9 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               <FieldContent>
                 <Select value={encryptFormType} onValueChange={(value) => setEncryptFormType(value ?? "")}>
                   <SelectTrigger id="bucket-encryption-type" className="w-full" aria-label={t("Encryption Type")}>
-                    <SelectValue placeholder={t("Please select encryption type")} />
+                    <SelectValue placeholder={t("Please select encryption type")}>
+                      {encryptionTypeLabels[encryptFormType] ?? null}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="disabled">{t("Disabled")}</SelectItem>
@@ -1186,7 +1201,12 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                       aria-label="KMS Key ID"
                       disabled={kmsKeyLoading || Boolean(kmsKeyError)}
                     >
-                      <SelectValue placeholder={t("Please select KMS key")} />
+                      <SelectValue placeholder={t("Please select KMS key")}>
+                        {encryptFormKmsKeyId
+                          ? (kmsKeyOptions.find((opt) => opt.value === encryptFormKmsKeyId)?.label ??
+                            encryptFormKmsKeyId)
+                          : null}
+                      </SelectValue>
                     </SelectTrigger>
                     <SelectContent>
                       {kmsKeyOptions.map((opt) => (
diff --git a/components/lifecycle/new-form.tsx b/components/lifecycle/new-form.tsx
index a024b70c..0f1c318c 100644
--- a/components/lifecycle/new-form.tsx
+++ b/components/lifecycle/new-form.tsx
@@ -360,7 +360,9 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                       <FieldContent>
                         <Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
                           <SelectTrigger className="w-full" aria-label={t("Object Version")}>
-                            <SelectValue />
+                            <SelectValue>
+                              {versionOptions.find((opt) => opt.value === versionType)?.label ?? null}
+                            </SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {versionOptions.map((opt) => (
@@ -548,7 +550,9 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                       <FieldContent>
                         <Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
                           <SelectTrigger className="w-full" aria-label={t("Object Version")}>
-                            <SelectValue />
+                            <SelectValue>
+                              {versionOptions.find((opt) => opt.value === versionType)?.label ?? null}
+                            </SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {versionOptions.map((opt) => (
diff --git a/components/replication/edit-form.tsx b/components/replication/edit-form.tsx
index 4c0e888d..65ab3426 100644
--- a/components/replication/edit-form.tsx
+++ b/components/replication/edit-form.tsx
@@ -435,6 +435,12 @@ export function ReplicationEditForm({
     onOpenChange(false)
   }
 
+  const tlsModeLabels: Record<BucketReplicationTlsMode, string> = {
+    verify: t("Default certificate verification"),
+    "custom-ca": t("Custom CA certificate"),
+    skip: t("Skip TLS verification"),
+  }
+
   return (
     <Dialog
       open={open}
@@ -500,7 +506,7 @@ export function ReplicationEditForm({
                       disabled={controlsLocked || !canEditTargetField("replicationSync")}
                     >
                       <SelectTrigger className="w-full" aria-label={t("Mode")}>
-                        <SelectValue />
+                        <SelectValue>{modeOptions.find((opt) => opt.value === modeType)?.label ?? null}</SelectValue>
                       </SelectTrigger>
                       <SelectContent>
                         {modeOptions.map((opt) => (
@@ -773,7 +779,7 @@ export function ReplicationEditForm({
                         disabled={controlsLocked || !canEditTargetField("skipTlsVerify")}
                       >
                         <SelectTrigger id="replication-edit-tls-verification" className="w-full">
-                          <SelectValue />
+                          <SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
@@ -929,7 +935,7 @@ export function ReplicationEditForm({
                           disabled={controlsLocked || !canEditTargetField("bandwidth")}
                         >
                           <SelectTrigger className="w-28" aria-label={t("Bandwidth Unit")}>
-                            <SelectValue />
+                            <SelectValue>{unitOptions.find((opt) => opt.value === unit)?.label ?? null}</SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {unitOptions.map((opt) => (
diff --git a/components/replication/new-form.tsx b/components/replication/new-form.tsx
index 355761ce..6bfcd383 100644
--- a/components/replication/new-form.tsx
+++ b/components/replication/new-form.tsx
@@ -397,6 +397,12 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
     resetForm()
   }
 
+  const tlsModeLabels: Record<BucketReplicationTlsMode, string> = {
+    verify: t("Default certificate verification"),
+    "custom-ca": t("Custom CA certificate"),
+    skip: t("Skip TLS verification"),
+  }
+
   return (
     <Dialog
       open={open}
@@ -462,7 +468,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
                       disabled={controlsLocked || !canEditTargetField("replicationSync")}
                     >
                       <SelectTrigger className="w-full" aria-label={t("Mode")}>
-                        <SelectValue />
+                        <SelectValue>{modeOptions.find((opt) => opt.value === modeType)?.label ?? null}</SelectValue>
                       </SelectTrigger>
                       <SelectContent>
                         {modeOptions.map((opt) => (
@@ -724,7 +730,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
                         disabled={controlsLocked || !canEditTargetField("skipTlsVerify")}
                       >
                         <SelectTrigger id="replication-tls-verification" className="w-full">
-                          <SelectValue />
+                          <SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
@@ -878,7 +884,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
                           disabled={controlsLocked || !canEditTargetField("bandwidth")}
                         >
                           <SelectTrigger className="w-28" aria-label={t("Bandwidth Unit")}>
-                            <SelectValue />
+                            <SelectValue>{unitOptions.find((opt) => opt.value === unit)?.label ?? null}</SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {unitOptions.map((opt) => (
diff --git a/components/site-replication/edit-form.tsx b/components/site-replication/edit-form.tsx
index 8dfe7e04..fffa59ee 100644
--- a/components/site-replication/edit-form.tsx
+++ b/components/site-replication/edit-form.tsx
@@ -110,6 +110,16 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
     return null
   }
 
+  const syncStateLabels: Partial<Record<SiteReplicationSyncState, string>> = {
+    enable: t("Enabled"),
+    disable: t("Disabled"),
+  }
+  const tlsModeLabels: Record<SiteReplicationTlsMode, string> = {
+    verify: t("Default certificate verification"),
+    "custom-ca": t("Custom CA certificate"),
+    skip: t("Skip TLS verification"),
+  }
+
   return (
     <Dialog
       open={open}
@@ -152,7 +162,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
               <Label htmlFor="site-edit-sync">{t("Sync")}</Label>
               <Select value={syncState} onValueChange={(value) => setSyncState(value as SiteReplicationSyncState)}>
                 <SelectTrigger id="site-edit-sync" className="w-full" aria-label={t("Sync")} disabled={saving}>
-                  <SelectValue placeholder={t("Select")} />
+                  <SelectValue placeholder={t("Select")}>{syncStateLabels[syncState] ?? null}</SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="enable">{t("Enabled")}</SelectItem>
@@ -202,7 +212,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
                   disabled={saving}
                 >
                   <SelectTrigger id="site-edit-tls-verification" className="w-full">
-                    <SelectValue />
+                    <SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
diff --git a/components/site-replication/new-form.tsx b/components/site-replication/new-form.tsx
index 67d13ced..ed37c802 100644
--- a/components/site-replication/new-form.tsx
+++ b/components/site-replication/new-form.tsx
@@ -216,6 +216,12 @@ export function SiteReplicationNewForm({
     resetForm()
   }
 
+  const tlsModeLabels: Record<SiteReplicationTlsMode, string> = {
+    verify: t("Default certificate verification"),
+    "custom-ca": t("Custom CA certificate"),
+    skip: t("Skip TLS verification"),
+  }
+
   return (
     <Dialog
       open={open}
@@ -454,7 +460,7 @@ export function SiteReplicationNewForm({
                               disabled={saving}
                             >
                               <SelectTrigger id={`site-tls-verification-${index}`} className="w-full">
-                                <SelectValue />
+                                <SelectValue>{tlsModeLabels[tlsModes[index] ?? "verify"]}</SelectValue>
                               </SelectTrigger>
                               <SelectContent>
                                 <SelectItem value="verify">{t("Default certificate verification")}</SelectItem>