search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
174 stars 69 forks source link

Settings form is not disabled when submission request is in progress #4740

Open Jinksi opened 2 years ago

Jinksi commented 2 years ago

Describe the bug

The Payments → Settings form and inputs remain editable while the submission form request is in progress. This could be confusing for users, especially if the request takes a while and the user makes changes during this time.

To Reproduce

  1. Go to Payments → Settings.
  2. Click on the Save Changes button.
  3. While the request is in progress (indicated by the Save Changes button animation), make changes to the settings form inputs.

Actual behavior

https://user-images.githubusercontent.com/3147296/189575825-1236f225-8aa6-47e7-aa02-9a7eaa464ba0.mov

Expected behavior

Desktop (please complete the following information):

Additional context

jbordonado commented 2 years ago

I had a quick look and we'll be able to figure out whether we are in the middle of saving the settings by using the isSaving prop available in the useSettings hook: https://github.com/Automattic/woocommerce-payments/blob/fecbe1cba9021c049df0d5d9b10e767cb152dbb3/client/data/settings/hooks.js#L368

I'm sending this to "Product Review" because we need to know exactly what we want to do while we are saving the settings. Disabling the checkboxes is one thing, but do we also need to adjust how they look (beyond the default styling)? What about accessibility (is disabling, thus losing the ability to focus the checkbox, a good thing? For instance, some thoughts in a link I found: here)

Jinksi commented 2 years ago

is disabling, thus losing the ability to focus the checkbox, a good thing?

@jbordonado That's a great point. We could consider using aria-disabled which looks like it's designed for this exact use-case:

where elements need to be exposed as disabled but are still available for users to find when navigating via the Tab key. Doing so can improve their discoverability as they will not be removed from the focus order of the web page, as aria-disabled does not change the focusability of such elements

elizaan36 commented 1 year ago

Can we use the same pattern used in WooCommerce core? If any changes are made to the form while the page is being saved and refreshed, they are erased. Seems like overkill to disable every input during the Submitting process.