From e782837b259e6467bcef000f6707d45bac3bf5a4 Mon Sep 17 00:00:00 2001
From: swierzbicki <sebastian.wierzbicki@circlekeurope.com>
Date: Fri, 20 Sep 2024 12:36:45 +0200
Subject: [PATCH] fix(SPV-1064): error when user clicks on paymail input

Fix provides according to documentation: https://mui.com/material-ui/react-autocomplete/#useautocomplete
---
 src/components/Input/PaymailAutocomplete.tsx | 18 +++++++++---------
 src/components/Input/PaymailInput.tsx        |  4 ++--
 src/components/Input/types.ts                |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Input/PaymailAutocomplete.tsx b/src/components/Input/PaymailAutocomplete.tsx
index 63b5840..e0e1242 100644
--- a/src/components/Input/PaymailAutocomplete.tsx
+++ b/src/components/Input/PaymailAutocomplete.tsx
@@ -30,26 +30,26 @@ export const PaymailAutocomplete = forwardRef<HTMLInputElement, PaymailAutocompl
       openOnFocus: false,
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { onMouseDown: _, ...rootProps } = getRootProps(); //omit onMouseDown to allow a free select of text in the input
 
     return (
-      <PaymailInput {...props} rootProps={rootProps} {...getInputProps()} ref={ref}>
-        {children}
+      <div {...getRootProps()}>
+          <PaymailInput {...props} inputProps={getInputProps()}  ref={ref}>
+            {children}
+          </PaymailInput>
 
         {groupedOptions.length > 0 ? (
           <Listbox {...getListboxProps()}>
-            {groupedOptions.map((contactPaymail, index) => {
-              const p = contactPaymail as string;
+            {(groupedOptions as string[]).map((option, index) => {
+
               return (
-                <li key={index} {...getOptionProps({ option: p, index })}>
-                  {p}
+                <li {...getOptionProps({ option, index })} key={index}>
+                  {option}
                 </li>
               );
             })}
           </Listbox>
         ) : null}
-      </PaymailInput>
+      </div>
     );
   },
 );
diff --git a/src/components/Input/PaymailInput.tsx b/src/components/Input/PaymailInput.tsx
index 3fd3321..9219dfc 100644
--- a/src/components/Input/PaymailInput.tsx
+++ b/src/components/Input/PaymailInput.tsx
@@ -7,11 +7,11 @@ import { InputLinkButton } from './Input.styles';
 import ContactsIcon from '@mui/icons-material/Contacts';
 
 export const PaymailInput = forwardRef<HTMLInputElement, PaymailInputProps>(
-  ({ showContactsButton, labelSuffix = '', children, ...props }, ref) => {
+  ({ showContactsButton, labelSuffix = '', children, inputProps, ...props }, ref) => {
     const paymailDomain = usePaymailDomain();
 
     return (
-      <Input ref={ref} {...props} type="text" labelText={`Paymail (example@${paymailDomain})${labelSuffix}`}>
+      <Input ref={ref} {...props} {...inputProps} type="text" labelText={`Paymail (example@${paymailDomain})${labelSuffix}`}>
         {showContactsButton && (
           <InputLinkButton to="/contacts">
             <ContactsIcon />
diff --git a/src/components/Input/types.ts b/src/components/Input/types.ts
index 78bfb24..e6648bf 100644
--- a/src/components/Input/types.ts
+++ b/src/components/Input/types.ts
@@ -17,7 +17,7 @@ export type CoinsInputProps = Omit<InputProps, 'type' | 'step' | 'min'>;
 export type PaymailInputProps = {
   showContactsButton?: boolean;
   labelSuffix?: string;
-  rootProps?: HTMLAttributes<HTMLDivElement>;
+  inputProps?: HTMLAttributes<HTMLInputElement>;
 } & Omit<InputProps, 'type' | 'labelText'>;
 
 export type PaymailAutocompleteProps = {