From 459f4aa9ec887ec038d917b1bc0f98270e28e3fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Tue, 7 May 2024 10:24:27 +0100
Subject: [PATCH] fix(components): token input items (#97)

---
 .changeset/purple-ants-suffer.md                |  5 +++++
 .../components/src/TokenInput/TokenInput.tsx    | 17 +++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/purple-ants-suffer.md

diff --git a/.changeset/purple-ants-suffer.md b/.changeset/purple-ants-suffer.md
new file mode 100644
index 000000000..92e7c5f96
--- /dev/null
+++ b/.changeset/purple-ants-suffer.md
@@ -0,0 +1,5 @@
+---
+"@interlay/ui": patch
+---
+
+fix(components): token input items
diff --git a/packages/components/src/TokenInput/TokenInput.tsx b/packages/components/src/TokenInput/TokenInput.tsx
index e07a382ca..288b3cb46 100644
--- a/packages/components/src/TokenInput/TokenInput.tsx
+++ b/packages/components/src/TokenInput/TokenInput.tsx
@@ -36,13 +36,26 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
 
   const inputRef = useDOMRef<HTMLInputElement>(ref);
 
-  const defaultCurrency = useMemo(() => getDefaultCurrency(props), []);
-
   const [value, setValue] = useState(defaultValue);
+
+  const defaultCurrency = useMemo(() => getDefaultCurrency(props), []);
   const [currency, setCurrency] = useState<any | undefined>(defaultCurrency);
 
   const inputId = useId();
 
+  useEffect(
+    () => {
+      if (props.type === 'selectable') {
+        setCurrency(
+          (props.items || []).find(
+            (item) => item.currency.symbol === (props.selectProps?.value || props.selectProps?.defaultValue)
+          )?.currency
+        );
+      }
+    },
+    props.type === 'selectable' ? [props.items] : []
+  );
+
   useEffect(() => {
     if (valueProp === undefined) return;