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

bitcoin-sv · Sep 23, 2024 · 346ac89 · 346ac89
1 parent adcd5bc
commit 346ac89
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -4,12 +4,13 @@ import { InputStyled, InputWrapper, LabelStyled } from './Input.styles';
 import { InputProps } from './types';
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ labelText, className, id, customPlaceholder, inputOnLightBackground, children, rootProps, ...rest }, ref) => {
+  ({ labelText, className, id, customPlaceholder, inputOnLightBackground, children, rootProps, inputProps, ...rest }, ref) => {
     return (
       <InputWrapper className={className} {...rootProps}>
         <InputStyled
           {...rest}
           ref={ref}
+          {...inputProps}
           placeholder={customPlaceholder || labelText}
           inputOnLightBackground={inputOnLightBackground || undefined}
         />

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={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
@@ -8,6 +8,7 @@ export type InputProps = {
   customPlaceholder?: string;
   inputOnLightBackground?: boolean;
   rootProps?: HTMLAttributes<HTMLDivElement>;
+  inputProps?: HTMLAttributes<HTMLInputElement>;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export type PasswordInputProps = Omit<InputProps, 'type' | 'withIcon'>;
@@ -17,7 +18,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 = {