We're a facing a problem when the component is mounting and it triggers autofocus, on

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Problem with handleFocus about react-currency-input HOT 3 OPEN

musashinm commented on September 4, 2024

Problem with handleFocus

from react-currency-input.

Comments (3)

musashinm commented on September 4, 2024 6

@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:

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

At this point the error described occurs on Console.

from react-currency-input.

aesopwolf commented on September 4, 2024

Can you provide some sample code to reproduce this?

from react-currency-input.

brunomartins-com commented on September 4, 2024

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 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.

from react-currency-input.

Recommend Projects