Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile] Fix comma handling in split transaction #2661

Conversation

sierikov
Copy link

@sierikov sierikov commented Apr 25, 2024

Attempt to solve #2629. This fix dynamically replaces a comma with a dot in "Split transaciton" mode on mobile devices.

@trafico-bot trafico-bot bot added the 🔍 Ready for Review Pull Request is not reviewed yet label Apr 25, 2024
Copy link

netlify bot commented Apr 25, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit ddfe0b5
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/662f8157a9c8570007840a8c
😎 Deploy Preview https://deploy-preview-2661.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Apr 25, 2024

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
9 4.67 MB → 4.67 MB (+166 B) +0.00%
Changeset
File Δ Size
src/components/util/AmountInput.tsx 📈 +136 B (+3.83%) 3.47 kB → 3.6 kB
src/components/mobile/transactions/TransactionEdit.jsx 📈 +30 B (+0.10%) 30.79 kB → 30.82 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 2.99 MB → 2.99 MB (+166 B) +0.01%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/resize-observer.js 18.37 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/narrow.js 59.68 kB 0%
static/js/usePreviewTransactions.js 790 B 0%
static/js/AppliedFilters.js 20.41 kB 0%
static/js/wide.js 263.53 kB 0%
static/js/ReportRouter.js 1.2 MB 0%

Copy link
Contributor

github-actions bot commented Apr 25, 2024

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 1.2 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.2 MB 0%

@sierikov sierikov force-pushed the fix/2629-separator-not-handled-mobile branch from 2e9aa4f to f39cf90 Compare April 25, 2024 12:07
@sierikov sierikov marked this pull request as ready for review April 25, 2024 12:15
@sierikov sierikov force-pushed the fix/2629-separator-not-handled-mobile branch from f39cf90 to 7841482 Compare April 25, 2024 16:04
@@ -74,8 +74,9 @@ export function AmountInput({
}

function onInputTextChange(val) {
setValue(val ? val : '');
onChangeValue?.(val);
const value = format(val, 'string').replace(',', '.');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably do this in onBlur/onUpdate instead of onChange

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Value has already no information about commas, so we cannot tell if it is for example 42 or 4,2 or 0,42 here in TransactionEdit.jsx. Please correct me if I'm wrong.

@Wizmaster
Copy link
Contributor

Hello @sierikov @joel-jeremy

I came across this PR while working on a similar feature request (#2318 with PR #2672).

The proposed change here breaks amount entry on locales using comma as a decimal separator, on mobile and desktop as AmountInput.tsx is used on both. I also think it breaks on locales using comma as a thousand separator.

I think it would be best to have something close to what is done in

return toRelaxedNumber(text.replace(/[,.]/, getNumberFormat().separator));

The issue is on mobile were the number keypad is used, which greatly limits the available inputs of the user. In that context, we can rather safely consider that the thousand separator will not be present, and that both comma and dot can be considered as decimal separator.

So maybe a flag could be added to AmountInput.tsx and set in TransactionEdit.jsx to signal that the component is used in a mobile context. If the flag is set, getAmount() could then replace comma and dot in value with the configured decimal separator before running the remainder of function.

Add autocorrection to the field, to reduce code impact
@sierikov sierikov force-pushed the fix/2629-separator-not-handled-mobile branch from 7841482 to ddfe0b5 Compare April 29, 2024 11:15
@joel-jeremy
Copy link
Contributor

joel-jeremy commented May 2, 2024

@sierikov @Wizmaster Would it be possible to make AmountInput behave similar to the FocusableAmountInput where decimals are auto inserted? See #2536

@sierikov
Copy link
Author

sierikov commented May 8, 2024

After reviewing the implementation of FocusableAmountInput and AmountInput, I haven't found a straightforward solution to maintain their distinct functionalities while fixing the issue. For now, merging the fix is the most viable option. We could rethink the design of input elements for mobile devices in general. My very unpolished idea is to define just two inputs: one for text and FocusableAmountInput for money.

What do you think? @Wizmaster

@joel-jeremy
Copy link
Contributor

The issue linked to this PR has been closed. Does this PR also need to be closed?

@sierikov
Copy link
Author

sierikov commented May 14, 2024

I think no. I'm currently experiencing difficulty in inputting the accurate amount via the mobile app, particularly when the format is set to 1 000.33. Moreover, we're unable to prompt iOS to display . instead of ,.

@psybers
Copy link
Contributor

psybers commented May 16, 2024

So if I understand this correctly, iOS is showing , for decimal places instead of ., due to the locale set on the phone.

Why would you not also configure Actual's settings to indicate , for decimals? Would that not fix the issue?

@sierikov
Copy link
Author

Apologies for any confusion caused by my previous message. Upon further investigation, it appears that we do have the ability to enable dot separators on iOS. You can achieve this by navigating to Settings -> General -> Language & Region -> Number Format -> selecting 1,234,567.89. With this solution in hand, we can now consider the issue resolved and proceed to close the corresponding PR.

@sierikov sierikov closed this May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔍 Ready for Review Pull Request is not reviewed yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants