From b61ae07ffdaafc8ce12d016bde1e95d258092157 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Fri, 17 Jul 2026 14:51:12 -0400
Subject: [PATCH] [PM-39948][PM-40406] Fix native select issues with dark mode
 and arrow click handling (#21877)

---
 libs/components/src/form-field/field-container.directive.ts | 1 +
 libs/components/src/form-field/form-field.component.html    | 2 +-
 libs/components/src/input/input.directive.ts                | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/form-field/field-container.directive.ts b/libs/components/src/form-field/field-container.directive.ts
index d51be0dd7f1..bca30b835d7 100644
--- a/libs/components/src/form-field/field-container.directive.ts
+++ b/libs/components/src/form-field/field-container.directive.ts
@@ -35,6 +35,7 @@ export class BitFieldContainerDirective {
       "has-[:focus-visible]:tw-ring-1",
       "has-[.tw-test-focus-visible]:tw-ring-1",
       "tw-relative",
+      "has-[select]:after:tw-pointer-events-none",
       "has-[select]:after:tw-absolute",
       // spacing here to match visual spacing used by ng-select arrow
       "has-[select]:after:tw-end-[calc(theme(spacing.3)_+_2px)]",
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 6f9e092d633..cc6f985c0bf 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -19,7 +19,7 @@
         <ng-content select="[bitPrefix]"></ng-content>
       </div>
       <div
-        class="tw-flex tw-w-full tw-items-center tw-pe-3 has-[[biticonbutton]:last-child]:tw-pe-1 has-[bit-select]:tw-pe-0 has-[bit-multi-select]:tw-pe-0 has-[textarea]:!tw-items-start"
+        class="tw-flex tw-w-full tw-items-center tw-pe-3 has-[[biticonbutton]:last-child]:tw-pe-1 has-[bit-select]:tw-pe-0 has-[select]:tw-pe-0 has-[bit-multi-select]:tw-pe-0 has-[textarea]:!tw-items-start"
       >
         <div [class]="contentContainerClasses" data-default-content>
           <ng-content></ng-content>
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index 9bfc6cdb718..dbc09779c20 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -57,6 +57,9 @@ export class BitInputDirective implements AfterViewInit {
       "focus:tw-outline-none",
       "tw-bg-transparent",
       "tw-text-fg-heading",
+      // native select options need non-transparent colors to work properly in windows dark mode
+      "[&_option]:tw-bg-background",
+      "[&_option]:tw-text-main",
       "[&:is(input,textarea):disabled]:tw-bg-bg-secondary",
       "[&:is(input,textarea):disabled]:!tw-placeholder-fg-inactive",
       "[&:is(input,textarea):disabled]:!tw-text-fg-inactive",