Как пофиксить баг в Google Chrome с onFocus React?

Question

Дмитрий Путилов @Brepex

Как пофиксить баг в Google Chrome с onFocus React?

Всем привет, возникла вот такая вот проблема, имеется вот такая вот кнопка на сайте

Кнопка

<PB.PaymentButtonWrapper clearMargin>
                        <PB.PaymentButton
                          accentColor={companyColors.accentColor}
                          type='button'
                          onClick={() => {
                            this.handleClickPaymentButton('card');
                            this.checkAmount(this.payment);
                          }}
                          className={`${loading || focusedInput ? 'b-button-disabled' : ''}`}
                          aria-label='Оплатить картой'
                          disabled={loading || focusedInput}
                          leftButtonInOtherMethods rightButtonInOtherMethods
                        >
                          <svg className='icon'>
                            <use href='#symbol-card' />
                          </svg>
                          Картой
                        </PB.PaymentButton>
                      </PB.PaymentButtonWrapper>

И есть вот такой вот Input

Input

<InputAmountBlock
                    amount={amount}
                    isFocusedInput={focusedInput}
                    handleAmountChanging={this.handleAmountChanging}
                    resetPlusMinusIndex={this.resetPlusMinusIndex}
                    dismissToast={this.dismissToast}
                    handlerFocusAmount={this.handlerFocusAmount}
                    errorHighlightingInput={this.getAmount === 0 && errorHighlightingInput}
                  />

и проблема в том, что при клике на кнопку, почему то срабатывает onFocus у input, а мне не нужно тчо бы он срабатывал

Код самого input,а

import React, { FC, memo } from 'react';
import NumberFormat from 'react-number-format';
import { InputAmountBlockExternalWrapper } from './style';

interface Props {
  amount: number;
  isFocusedInput: boolean;
  handleAmountChanging: (value) => void;
  resetPlusMinusIndex: () => void;
  dismissToast: () => void;
  handlerFocusAmount: () => void;
  errorHighlightingInput: boolean;
}

export const InputAmountBlock: FC<Props> = memo(
  ({
    amount,
    isFocusedInput,
    handleAmountChanging,
    resetPlusMinusIndex,
    dismissToast,
    handlerFocusAmount,
    errorHighlightingInput,
  }) => {
    const getAmount = (): number => amount || 0;

    return (
      <InputAmountBlockExternalWrapper
        className="application-summ--input"
        isEmptyAmountInput={getAmount() === 0}
        errorHighlightingInput={errorHighlightingInput}
      >
        <div className="application-summ--input--wrapper">
          <NumberFormat
            type="tel"
            id="money-input"
            onValueChange={handleAmountChanging}
            onChange={resetPlusMinusIndex}
            onClick={dismissToast}
            value={amount}
            suffix=" ₽"
            pattern="[0-9]*"
            placeholder={!isFocusedInput ? 'введите сумму' : null}
            onFocus={handlerFocusAmount}
            onBlur={handlerFocusAmount}
            required
            decimalScale={0}
            maxLength={8}
          />
          <svg className="icon">
            <use href="#symbol-rub" />
          </svg>
        </div>
      </InputAmountBlockExternalWrapper>
    );
  },
);

InputAmountBlock.displayName = 'MemoInputAmountBlock';

И эта проблема только в chrome, в яндекс и сафари таких проблем нет, как можно решить, подскажите пожалуйста!?

Если что, в кнопке до onClick даже не доходит, preventDefault не помогает
НО, если сделать кнопку button просто, то работает все как надо, если дать ей type=button, такая же пролема, Пытался давать другой тип кастомным кнопкам, не помогло