From dbc290dc5ddb0500a54a13c8954d2e6340ca057e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Wed, 14 Feb 2024 15:11:04 +0100
Subject: [PATCH] fix: Datalist highlighted element (keyboard navigation)
 (#5182)

---
 .changeset/afraid-avocados-beam.md                      | 5 +++++
 packages/components/src/Typeahead/Typeahead.module.scss | 5 ++---
 2 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/afraid-avocados-beam.md

diff --git a/.changeset/afraid-avocados-beam.md b/.changeset/afraid-avocados-beam.md
new file mode 100644
index 00000000000..e6f822c60f8
--- /dev/null
+++ b/.changeset/afraid-avocados-beam.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix: Datalist hightligted element (keyboard navigation)
diff --git a/packages/components/src/Typeahead/Typeahead.module.scss b/packages/components/src/Typeahead/Typeahead.module.scss
index cecbd6b3212..555072928ef 100644
--- a/packages/components/src/Typeahead/Typeahead.module.scss
+++ b/packages/components/src/Typeahead/Typeahead.module.scss
@@ -141,13 +141,12 @@ $tc-typeahead-item-description-height: 1rem !default;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	
+
 	span {
 		padding: $padding-small $padding-smaller;
 	}
 }
 
-
 .items {
 	margin: 0;
 	padding: 0;
@@ -231,7 +230,7 @@ $tc-typeahead-item-description-height: 1rem !default;
 
 	&-highlighted,
 	&:hover {
-		background-color: tokens.$coral-color-accent-background-weak;
+		background-color: tokens.$coral-color-accent-background-weak-hover;
 
 		&.selected {
 			background-color: tokens.$coral-color-accent-background-weak-active;