Problem with handleFocus

[musashinm]

We're a facing a problem when the component is mounting and it triggers autofocus, on file lib/index.js:210

var selectionEnd = this.theInput.value.length - this.props.suffix.length;

It's causing the following error:

Uncaught TypeError: Cannot read property 'value' of undefined
    at CurrencyInput.handleFocus (***)

[aesopwolf]

Can you provide some sample code to reproduce this?

[musashinm]

@aesopwolf,

<CurrencyInput
  {...props.inputProps}
  name="someName"
  value="1234.56"
  allowNegative
  decimalSeparator=","
  thousandSeparator="."
  precision="2"
  className="pp-input"
  onChangeEvent={e => props.input.onChange(handleOnChange(e))}
/>

Where props.input.onChange is from Redux Form and handleOnChange clean up the masked value to store in Redux Form.

The scenario is:

1. The component is mounted as plain text
2. User clicks on a edit button
3. The component is mounted as CurrencyInput with autoFocus

At this point the error described occurs on Console.

[brunomartins-com]

Hey guys,

I am having a kind of focus problem, but only in a mobile version (I've tested in Safari and Chrome for iOS).

See the video: https://youtu.be/fTpESlAdSFs

I have 3 <CurrencyInput> in the same page. The last one is highlighted since the page is opened. Every time I choose a different one above and hit a number, the code jumped focusing the last one.

	<Col lg={8} md={8} sm={24} xs={24}>
		<Form.Item label="Balance">
			{getFieldDecorator('balanceAmount')(
				<CurrencyInput
					name="balanceAmount"
					prefix="$"
					decimalSeparator="."
					thousandSeparator=","
					className="ant-input"
					pattern="[0-9]*"
				/>
			)}
		</Form.Item>
	</Col>
	<Col lg={8} md={8} sm={24} xs={24}>
		<Form.Item label="Bonus">
			{getFieldDecorator('bonusAmount')(
				<CurrencyInput
					name="bonusAmount"
					prefix="$"
					decimalSeparator="."
					thousandSeparator=","
					className="ant-input"
					pattern="[0-9]*"
				/>
			)}
		</Form.Item>
	</Col>
	<Col lg={8} md={8} sm={24} xs={24}>
		<Form.Item label="Special Fund">
			{getFieldDecorator('specialFund')(
				<CurrencyInput
					name="specialFund"
					prefix="$"
					decimalSeparator="."
					thousandSeparator=","
					className="ant-input"
					pattern="[0-9]*"
				/>
			)}
		</Form.Item>
	</Col>
</Row>```
 
Any thoughts? 
Thank you.