fix(SPV-1064): error when user clicks on paymail input

Fix provides according to documentation: https://mui.com/material-ui/react-autocomplete/#useautocomplete
bitcoin-sv · Sep 20, 2024 · e782837 · e782837
1 parent adcd5bc
commit e782837
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 = {