From 5cda39ce19fa3f25ae18a0b07dd85e97378edd26 Mon Sep 17 00:00:00 2001
From: Vegard Haugstvedt <it.vegard@gmail.com>
Date: Thu, 17 Aug 2023 16:00:25 +0200
Subject: [PATCH] Bugfix/missing red border on combobox with error (#2184)

Co-authored-by: Ken <ken.aleksander@gmail.com>
---
 .changeset/fifty-spoons-tap.md                         |  6 ++++++
 @navikt/core/css/form/combobox.css                     | 10 ++++++++++
 @navikt/core/css/tokens.json                           |  3 ++-
 .../core/react/src/form/combobox/ComboboxWrapper.tsx   |  5 ++---
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fifty-spoons-tap.md

diff --git a/.changeset/fifty-spoons-tap.md b/.changeset/fifty-spoons-tap.md
new file mode 100644
index 0000000000..e50f9fbf64
--- /dev/null
+++ b/.changeset/fifty-spoons-tap.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Added red border to Combobox in error state
diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
index 1c13798402..2c364efa91 100644
--- a/@navikt/core/css/form/combobox.css
+++ b/@navikt/core/css/form/combobox.css
@@ -32,6 +32,16 @@
   cursor: text;
 }
 
+.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+
 .navds-combobox__selected-options {
   gap: var(--a-spacing-2);
   align-items: center;
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index 83e712a5bf..9e4a796426 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -388,7 +388,8 @@
     "--ac-combobox-list-item-selected-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-combobox-list-item-loading-bg": "--a-surface-default",
     "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
-    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus"
+    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus",
+    "--ac-combobox-error-border": "--a-border-danger"
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",
diff --git a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
index 6c96321335..6bfe1f8516 100644
--- a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
+++ b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
@@ -49,10 +49,9 @@ const ComboboxWrapper = ({
         className,
         "navds-form-field",
         `navds-form-field--${inputSize}`,
-        "navds-search",
         {
-          "navds-search--error": hasError,
-          "navds-search--disabled": !!inputProps.disabled,
+          "navds-combobox--error": hasError,
+          "navds-combobox--disabled": !!inputProps.disabled,
           "navds-combobox--focused": hasFocusWithin,
         }
       )}