#10289: Cursor position is shifted incorrectly in Localized number field component by mahmoudadel54 · Pull Request #10312 · geosolutions-it/MapStore2

mahmoudadel54 · 2024-05-13T22:30:26Z

Description

In this PR, fixing cursor position shifting incorrectly in Localized number field component

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

Issue

#10289

What is the current behavior?
#10289

What is the new behavior?
For Localized number field component, if user edits/adds/deletes numbers into the input, the cursor will move in a correct way.

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

Yes, and I documented them in migration notes
No

Other useful information

…lized number field component Description: - fix the jumping cursor to unexpected positions for localized numeric input

…lized number field component Description: - replace logic in updateDidMount to onKeyUp - remove unused comments

…lized number field component Description: - remove unused method in IntlNumberFormControl

Description: - resolve FE failure in unit test

dsuren1

@mahmoudadel54
In most cases, the cursor position behaves correctly, except for few these. Kindly check. Thanks!

With fractional/decimal digit, on focus field value becomes unformatted

fractional_unformatted.mp4
Follow up to above issue, the cursor position is incorrect when deleting fractional digits probably caused by unformatted value

unformatted_cursor_position_incorrect.mp4

web/client/components/I18N/IntlNumberFormControl.jsx

mahmoudadel54 · 2024-05-15T15:45:39Z

@mahmoudadel54 In most cases, the cursor position behaves correctly, except for few these. Kindly check. Thanks!
With fractional/decimal digit, on focus field value becomes unformatted
fractional_unformatted.mp4
Follow up to above issue, the cursor position is incorrect when deleting fractional digits probably caused by unformatted value
unformatted_cursor_position_incorrect.mp4

These are because this regex which located in NumericInput:

MapStore2/web/client/libs/numeric-input/NumericInput.jsx

Line 11 in 4c314d5

const RE_INCOMPLETE_NUMBER = /^([+-]|[+-]?\d+\.\d+0*|[+-]\.0*|[+-]?\d+\.)?$/;

it sees number like: 321.235 as incomplete number

@dsuren1 I need more clarifications about the cases this regular expression should handle.

…lized number field component [resolve review comments] Description: - fix issue of on focus effect in NumericInput

…lized number field component [resolve review comments] Description: - fix FE issue in onKeyDown in IntlNumberFormControl

…lized number field component [resolve review comments] Description: - revert unnecessary change

dsuren1

@mahmoudadel54

Add unit tests for these cases
Cursor position shift incorrectly as we type. I didn't see this before previous commit. Kindly check it. Thanks!

incorrect_cursor.mp4

mahmoudadel54 · 2024-05-16T12:18:05Z

@mahmoudadel54
Add unit tests for these cases
Cursor position shift incorrectly as we type. I didn't see this before previous commit. Kindly check it. Thanks!
incorrect_cursor.mp4

Hi @dsuren1
can you please double check again? as I made double check and it works well

cursor.issue.working.as.expected.mp4

web/client/components/I18N/IntlNumberFormControl.jsx

dsuren1 · 2024-05-16T13:26:47Z

Hi @dsuren1 can you please double check again? as I made double check and it works well

Like I mentioned over chat, it happens when user types the value a little fast. Kindly give it a try like we discussed. Thanks!

…lized number field component [resolve review comments] Description: - move the fixing logic of cursor position to componentDidUpdate instead of onKeyUp

dsuren1

@mahmoudadel54
Before reviewing this new change, I would also like this component to support onKeyUp function from consuming component in tandem with the changes incorporated for handing cursor

…lized number field component [resolve review comments] Description: - add onKeyUp as a prop into IntlNumberFormControl for any expected future consuming from a parent comp

mahmoudadel54 · 2024-05-17T07:03:24Z

@mahmoudadel54 Before reviewing this new change, I would also like this component to support onKeyUp function from consuming component in tandem with the changes incorporated for handing cursor

Done

dsuren1

@mahmoudadel54
Rest looks good. Just minor amendments. And still unit tests are missing

web/client/components/I18N/IntlNumberFormControl.jsx

…lized number field component [resolve review comments] Description: - add unit test - resolve review comments

dsuren1 · 2024-05-20T06:45:50Z

@ElenaGallo Kindly test it in DEV and let us know if it's good to be backported. Thanks!

ElenaGallo · 2024-05-20T14:14:02Z

Test passed, @mahmoudadel54 please backport to 2024.01.xx. Thanks

…lized number field component (geosolutions-it#10312) * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component Description: - fix the jumping cursor to unexpected positions for localized numeric input * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component Description: - replace logic in updateDidMount to onKeyUp - remove unused comments * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component Description: - remove unused method in IntlNumberFormControl * geosolutions-it#10136: Search for Map CRS coordinates Description: - resolve FE failure in unit test * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - fix issue of on focus effect in NumericInput * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - fix FE issue in onKeyDown in IntlNumberFormControl * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - revert unnecessary change * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - move the fixing logic of cursor position to componentDidUpdate instead of onKeyUp * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - add onKeyUp as a prop into IntlNumberFormControl for any expected future consuming from a parent comp * geosolutions-it#10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - add unit test - resolve review comments

mahmoudadel54 · 2024-05-21T07:47:22Z

Test passed, @mahmoudadel54 please backport to 2024.01.xx. Thanks

Backport is done ---> #10346

…eld component (#10312) (#10346) * #10289: Cursor position is shifted incorrectly in Localized number field component Description: - fix the jumping cursor to unexpected positions for localized numeric input * #10289: Cursor position is shifted incorrectly in Localized number field component Description: - replace logic in updateDidMount to onKeyUp - remove unused comments * #10289: Cursor position is shifted incorrectly in Localized number field component Description: - remove unused method in IntlNumberFormControl * #10136: Search for Map CRS coordinates Description: - resolve FE failure in unit test * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - fix issue of on focus effect in NumericInput * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - fix FE issue in onKeyDown in IntlNumberFormControl * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - revert unnecessary change * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - move the fixing logic of cursor position to componentDidUpdate instead of onKeyUp * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - add onKeyUp as a prop into IntlNumberFormControl for any expected future consuming from a parent comp * #10289: Cursor position is shifted incorrectly in Localized number field component [resolve review comments] Description: - add unit test - resolve review comments

mahmoudadel54 added 3 commits May 13, 2024 23:39

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

edae9e7

…lized number field component Description: - fix the jumping cursor to unexpected positions for localized numeric input

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

3a5f86a

…lized number field component Description: - replace logic in updateDidMount to onKeyUp - remove unused comments

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

056a766

…lized number field component Description: - remove unused method in IntlNumberFormControl

mahmoudadel54 added bug Internal labels May 13, 2024

mahmoudadel54 added this to the 2024.01.01 milestone May 13, 2024

mahmoudadel54 requested a review from dsuren1 May 13, 2024 22:30

mahmoudadel54 self-assigned this May 13, 2024

geosolutions-it#10136: Search for Map CRS coordinates

9aa5337

Description: - resolve FE failure in unit test

mahmoudadel54 linked an issue May 14, 2024 that may be closed by this pull request

Cursor position is shifted incorrectly in Localized number field component #10289

Closed

1 task

dsuren1 requested changes May 15, 2024

View reviewed changes

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

mahmoudadel54 added 3 commits May 16, 2024 11:57

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

89d16ad

…lized number field component [resolve review comments] Description: - fix issue of on focus effect in NumericInput

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

c47ff1c

…lized number field component [resolve review comments] Description: - fix FE issue in onKeyDown in IntlNumberFormControl

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

57e4c4e

…lized number field component [resolve review comments] Description: - revert unnecessary change

mahmoudadel54 requested a review from dsuren1 May 16, 2024 09:54

dsuren1 requested changes May 16, 2024

View reviewed changes

dsuren1 reviewed May 16, 2024

View reviewed changes

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

0c8a864

…lized number field component [resolve review comments] Description: - move the fixing logic of cursor position to componentDidUpdate instead of onKeyUp

mahmoudadel54 requested a review from dsuren1 May 16, 2024 14:19

dsuren1 requested changes May 17, 2024

View reviewed changes

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

bad9be8

…lized number field component [resolve review comments] Description: - add onKeyUp as a prop into IntlNumberFormControl for any expected future consuming from a parent comp

mahmoudadel54 requested a review from dsuren1 May 17, 2024 07:25

dsuren1 requested changes May 17, 2024

View reviewed changes

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

web/client/components/I18N/IntlNumberFormControl.jsx Outdated Show resolved Hide resolved

geosolutions-it#10289: Cursor position is shifted incorrectly in Loca…

e5e1c53

…lized number field component [resolve review comments] Description: - add unit test - resolve review comments

mahmoudadel54 requested a review from dsuren1 May 17, 2024 14:32

dsuren1 approved these changes May 20, 2024

View reviewed changes

dsuren1 merged commit ddf127e into geosolutions-it:master May 20, 2024

dsuren1 added the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label May 20, 2024

mahmoudadel54 mentioned this pull request May 21, 2024

[Backport 2024.01.xx] #10289: Cursor position is shifted incorrectly in Localized number field component (#10312) #10346

Merged

ElenaGallo removed the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label May 21, 2024

Conversation

mahmoudadel54 commented May 13, 2024

Description

Issue

Breaking change

Other useful information

Uh oh!

dsuren1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahmoudadel54 commented May 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dsuren1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mahmoudadel54 commented May 16, 2024

Uh oh!

Uh oh!

dsuren1 commented May 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dsuren1 left a comment

Choose a reason for hiding this comment

Uh oh!

mahmoudadel54 commented May 17, 2024

Uh oh!

dsuren1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dsuren1 commented May 20, 2024

Uh oh!

ElenaGallo commented May 20, 2024

Uh oh!

mahmoudadel54 commented May 21, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mahmoudadel54 commented May 15, 2024 •

edited

Loading

dsuren1 left a comment •

edited

Loading

dsuren1 commented May 16, 2024 •

edited

Loading