Skip to content

Commit

Permalink
FIO-9144 Fix cursor jump in number component
Browse files Browse the repository at this point in the history
- Use the length of the input value instead of root.currentSelection so that delimiters are included in the length.

- Add test for number component that asserts the correct input selection start (caret/cursor) position.
  • Loading branch information
blakekrammes committed Oct 11, 2024
1 parent bcf06c2 commit acbf6fa
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 6 deletions.
4 changes: 2 additions & 2 deletions src/components/_classes/component/Component.js
Original file line number Diff line number Diff line change
Expand Up @@ -1982,12 +1982,12 @@ export default class Component extends Element {
restoreCaretPosition() {
if (this.root?.currentSelection) {
if (this.refs.input?.length) {
const { selection, index } = this.root.currentSelection;
const { index } = this.root.currentSelection;
let input = this.refs.input[index];
const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
if (input) {
if (isInputRangeSelectable(input)) {
input.setSelectionRange(...selection);
input.setSelectionRange(input.value.length, input.value.length);
}
}
else {
Expand Down
22 changes: 20 additions & 2 deletions test/unit/Number.unit.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {
comp7,
comp8,
comp9,
comp10
comp10,
comp11
} from './fixtures/number';
import CurrencyComponent from "../../src/components/currency/Currency";

describe('Number Component', () => {
it('Should build an number component', () => {
Expand Down Expand Up @@ -471,6 +471,24 @@ describe('Number Component', () => {
});
});

it('Should maintain the correct caret (cursor) position when rendering value with thousands separators after restoreCaretPosition is called', (done) => {
Formio.createForm(document.createElement('div'), comp11, {}).then((form) => {
const numberComponent = form.getComponent('number');
form.root.focusedComponent = numberComponent;
const numberElement = numberComponent.refs.input[0];
const inputEvent = new Event('input');

numberElement.value = 1234567;
numberElement.dispatchEvent(inputEvent);
// see https://formio.atlassian.net/browse/FIO-9144
// before the fix, the caret was moving back by one after being restored
numberComponent.restoreCaretPosition();
assert.equal(numberElement.value, '1,234,567');
assert.equal(numberElement.selectionStart, 9);
done();
}).catch(done);
});

// it('Should add trailing zeros on blur, if decimal required', (done) => {
// const comp = _.cloneDeep(comp3);
//
Expand Down
18 changes: 18 additions & 0 deletions test/unit/fixtures/number/comp11.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export default {
components: [
{
label: 'Number',
mask: true,
tableView: false,
modalEdit: true,
multiple: true,
delimiter: ',',
requireDecimal: false,
inputFormat: 'plain',
truncateMultipleSpaces: false,
key: 'number',
type: 'number',
input: true
}
]
};
5 changes: 3 additions & 2 deletions test/unit/fixtures/number/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@ import comp6 from './comp6';
import comp7 from './comp7';
import comp8 from './comp8';
import comp9 from './comp9';
import comp10 from './comp10'
export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
import comp10 from './comp10';
import comp11 from './comp11';
export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };

0 comments on commit acbf6fa

Please sign in to comment.