React-光标跳至输入结尾

如何解决React-光标跳至输入结尾

当用户更改输入值时，光标将移动到输入的最后。

我最初以为这是由onChange回调引起的，但与该问题无关。

我不确定还有什么导致此问题。有什么想法吗？

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,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);