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((props, ref): J const inputRef = useDOMRef(ref); - const defaultCurrency = useMemo(() => getDefaultCurrency(props), []); - const [value, setValue] = useState(defaultValue); + + const defaultCurrency = useMemo(() => getDefaultCurrency(props), []); const [currency, setCurrency] = useState(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;