Trying to edit a value sets the caret to the end of the input

[kristremblay]

It seems the vue package has an issue that the vanilla js package does not: whenever a field's value is updated, the caret is automatically moved to the end of the input.

This makes it cumbersome to make changes like changing $52,000 to $52,500.

[kristremblay]

This is unfortunately a deal breaker, unless there is something I have missed in the documentation.

[AlexandreBonneau]

Indeed, that behavior can be reproduced with the dollar settings (see the demo), but not with other settings like default, 'euro', 'integer', etc.

After a few tests, I could find that it's related to the currency symbol. When using:

<div class="labelClasses">With the <code>'testing'</code> option</div>
		<vue-autonumeric :options="['euro', {
							  digitGroupSeparator: '.',
							  decimalCharacter: ',',
							  decimalCharacterAlternative: '.',
							  currencySymbol: '$',
							  currencySymbolPlacement: 'p',
							  }]" v-model="autoNumericModel"></vue-autonumeric>

The bug occurs, but if you use currencySymbol: '€' then it does not.

[kristremblay]

@AlexandreBonneau thank you for your quick response.

Unfortunately the issue is still intermittent even in the scenarios you describe as working correctly. It seems to work often on integer, but if I do something like ['integer', {currencySymbol: '$'}] it breaks again.

[AlexandreBonneau]

Well, as it seems, it's related to the use of currencySymbol: '$'.

[AlexandreBonneau]

This is related to autoNumeric/autoNumeric#684.

[kristremblay]

Thanks for the link, I didn't notice that one when I searched the issues.

Up until now I've been using v-money which seems to handle this by calculating the caret position https://github.com/vuejs-tips/v-money/blob/master/src/directive.js