React - Cursor jumping to the end of input

Question

When the user changes the input value, then the cursor moves to the very end of the input.

I initially thought this was caused by the onChange callback, but it has nothing to do with the issue.

I'm not sure what else is causing this issue. Any ideas?

SkuInput.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { selectVariant } from '../../../../../../redux/selectors/ProductOptions';
import { updateVariant } from '../../../../../../redux/actions/ProductOptions';
import { FormElement as Input } from '../../../../../shared/FormFields';

export const SkuInput = ({
  label,
  placeholder,
  value,
  required,
  disabled,
  invalid,
  policy,
  onChange
}) => (
  <Input
    label={label}
    placeholder={placeholder}
    value={value}
    required={required}
    disabled={disabled}
    validates={!invalid}
    policy={policy}
    onChange={onChange}
  />
);

SkuInput.propTypes = {
  index: PropTypes.number.isRequired,
  label: PropTypes.string,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string,
  required: PropTypes.bool.isRequired,
  disabled: PropTypes.bool.isRequired,
  invalid: PropTypes.bool.isRequired,
  policy: PropTypes.shape({
    read: PropTypes.bool,
    write: PropTypes.bool,
    message: PropTypes.string
  }).isRequired,
  onChange: PropTypes.func.isRequired
};

export const selectLabel = state => {
  const { isMarketplacesVariantUniqueIdentifiersActive } = state.Config;

  if (!isMarketplacesVariantUniqueIdentifiersActive) {
    return null;
  }

  return state.ProductOptions.i18n.table_sku;
};

const mapStateToProps = (state, ownProps) => {
  const variant = selectVariant(state, ownProps);
  const invalid = 'sku' in (variant.errors || {});
  const policy = variant.policies.sku;

  return {
    label: selectLabel(state),
    placeholder: state.ProductOptions.i18n.grid_sku_placeholder,
    value: variant.sku,
    required: state.ProductOptions.config.skuRequired,
    disabled: !!variant.hidden,
    invalid,
    policy
  };
};

const mapDispatchToProps = (dispatch, { index }) => ({
  onChange: e => dispatch(updateVariant(index, { sku: e.target.value, errors: {} }))
});

export default connect(mapStateToProps, mapDispatchToProps)(SkuInput);

index.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { selectProductIdentifiersLabel } from '../../Header';
import SkuInput from './SkuInput';
import EditButton from './EditButton';

export const ProductIdentifiers = ({ index, label }) => (
  <div data-header={label} className='flex-2'>
    <div className='product-identifiers-container'>
      <SkuInput index={index} />
      <EditButton index={index} />
    </div>
  </div>
);

ProductIdentifiers.propTypes = {
  index: PropTypes.number.isRequired,
  label: PropTypes.string.isRequired
};

const mapStateToProps = state => ({
  label: selectProductIdentifiersLabel(state)
});

export default connect(mapStateToProps)(ProductIdentifiers);