From 81d8bb7c2825993c0b4b27441740b3b58c9ad742 Mon Sep 17 00:00:00 2001
From: David Featherston <david@lambry.com>
Date: Tue, 10 Dec 2024 13:05:29 +1100
Subject: [PATCH] style(@dpc-sdp/ripple-ui-forms): design feedback

---
 .../src/components/RplFormDropdown/MultiValueTagList.css     | 4 ++++
 .../src/components/RplFormDropdown/RplFormDropdown.css       | 5 ++++-
 .../src/components/RplFormDropdown/RplFormDropdown.vue       | 4 ++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css
index 3d7050bd1..ab4617eac 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css
@@ -36,6 +36,10 @@
   white-space: nowrap;
   cursor: pointer;
 
+  &:active {
+    border-color: var(--rpl-clr-neutral-800);
+  }
+
   .rpl-icon {
     pointer-events: none;
   }
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
index 3c32579d7..e4032f990 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
@@ -53,7 +53,8 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.rpl-u-focusable--force-on {
     border-color: var(--rpl-clr-dark);
   }
 
@@ -118,6 +119,7 @@
   top: 50%;
   right: calc(var(--rpl-sp-5) - var(--local-toogle-inset));
   margin-top: -8px;
+  transition: transform var(--rpl-motion-speed-7) linear;
 }
 
 .rpl-form-dropdown-menu {
@@ -200,6 +202,7 @@
   background: none;
   width: 100%;
   min-width: var(--rpl-sp-9);
+  color: inherit;
 }
 
 .rpl-form-dropdown-search__no-results {
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
index de6d117a2..daef1d85e 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
@@ -214,6 +214,10 @@ const handleSearchSubmit = () => {
     isMatchingSearchResult(processedOptions.value[0].label)
   ) {
     handleSelectOption(processedOptions.value[0])
+
+    if (multiSearch.value) {
+      searchValue.value = ''
+    }
   }
 }