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

fix: improve focus behavior in multi-level forms #3889

Closed
Benunc opened this issue Dec 4, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@Benunc
Copy link
Member

commented Dec 4, 2018

Bug Report

User Story

As a donor, I want to be able to change the focus of a field by clicking on it only once so that I can enter information.

Current Behavior

Currently, if the amount field is selected on a multilevel form with custom amounts enabled, and then you click to focus on the Prénom field, it shifts focus from the amount field to the first level:

losingfocus

Expected Behavior

One click should cause the focus to shift to the Name field.

Bug Type

  • This bug describes functionality that once worked as expected in version X.X.X.
  • This bug describes functionality that never worked as expected.
  • I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

  1. Change the site language to French fr_FR
  2. create a form with multilevels displayed as buttons, and then enable custom amounts.
  3. on the front end, click into the amount field, and then click on the Prénom field.

Related

https://secure.helpscout.net/conversation/723751029/30517/

Acceptance Criteria

  • Clicking on the Prenom field changes focus immediately to that field.
  • The fix does not affect english forms, or other language forms.

Environment

WordPress System Info ### WordPress Environment ###

Home URL: https://livegive.wpsteward.com
Site URL: https://livegive.wpsteward.com
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: fr_FR
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Show on Front: posts
Table Prefix Length: wp_8138bfdc07_
Table Prefix Length: 14
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, refunded, failed, revoked, cancelled, abandoned, processing, preapproval, give_subscription

Server Environment

Hosting Provider: DBH: localhost, SRV: livegive.wpsteward.com
TLS Connection: Connexion utilisé TLS 1.2
TLS Connection: Probably Okay
Server Info: Apache/2.4.37 (Unix) OpenSSL/1.0.1f
PHP Version: 7.0.32
PHP Post Max Size: 1 GB
PHP Time Limit: 30
PHP Max Input Vars: 5000
PHP Max Upload Size: 512 MB
cURL Version: 7.35.0, OpenSSL/1.0.1f - Nous recommandons au minimum cURL 7.40.
SUHOSIN Installed: –
MySQL Version: 5.5.62 - Nous recommandons MySQL 5.6 ou supérieur. Voir : Pré-requis WordPress
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.3.0
Give Cache: Activé
Database Updates: Toutes les mises à jours de la base de données sont terminéees.
Give Cache: Activé
Give Cache: ✔Nouveau don✔Reçu de donsNouveau don hors-ligneInstructions pour le dons hors ligne✔Enregistrement d’un nouvel utilisateur✔User Registration Information✔Donor NoteEmail access✔Daily Email Report✔Weekly Email Report✔Monthly Email ReportRenewal Receipt EmailSubscription Cancelled EmailSubscription Completed Email✔Subscription Reminder EmailSubscriptions Email Access
Upgraded From: 2.2.1
Test Mode: Activé
Currency Code: USD
Currency Position: Après
Decimal Separator: .
Thousands Separator: ,
Success Page: https://livegive.wpsteward.com/donation-confirmation/
Failure Page: –
Donation History Page: https://livegive.wpsteward.com/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Don de Test, Stripe - Credit Card, PayPal Payments Pro, Authorize.net, PayPal Standard
Default Payment Gateway: Stripe - Credit Card
PayPal IPN Verification: Désactivé
PayPal IPN Notifications: IPN reçu pour #1084 ( 8H4629943X7440214 ) le 09/04/2018 à 15:46. Statut VERIFIED
Donor Email Access: Désactivé

Active Give Add-ons

Give - Authorize.net Gateway: ✔ Autorisé – par WordImpress – 1.4.3
Give - Email Reports: ✔ Autorisé – par WordImpress – 1.1.2
Give - Form Field Manager: Non autorisé – par GiveWP – 1.4.1
Give - Google Analytics Donation Tracking: Non autorisé – par GiveWP – 1.2.2
Give - MailChimp: Non autorisé – par GiveWP – 1.4.2
Give - Manual Donations: Non autorisé – par GiveWP – 1.4.2
Give - PayPal Pro Gateway: Non autorisé – par GiveWP – 1.2.1
Give - PDF Receipts: Non autorisé – par GiveWP – 2.3.1
Give - Recurring Donations: Non autorisé – par GiveWP – 1.8.2
Give - Stripe Gateway: Non autorisé – par GiveWP – 2.1.2
Give - Tributes: Non autorisé – par GiveWP – 1.5.1
Give - Zapier: ✔ Autorisé – par WordImpress – 1.2.1

Other Active Plugins

Ben's Helper Functions: par BenUNC –
Better Click To Tweet: par Ben Meredith – 5.6.3
Email Cop: par Ashfame – 0.1.1
Google Analytics for WordPress by MonsterInsights: par MonsterInsights – 7.3.2
NEX-Forms - Ultimate: par Basix – 7.2.3
Query Monitor: par John Blackbourn & contributors – 3.1.1
User Switching: par John Blackbourn & contributors – 1.4.0
WP Crontrol: par John Blackbourn & contributors – 1.6.2

Inactive Plugins

Akismet Anti-Spam: par Automattic – 4.1
Give - Currency Switcher: par GiveWP – 1.3.0
Give - Database HealthCheck: par WordImpress – 0.0.2
Give - Fee Recovery: par GiveWP – 1.7.2
Give - Mollie Gateway: par WordImpress – 1.1.1
Gutenberg: par Gutenberg Team – 4.6.1
Hello Dolly: par Matt Mullenweg – 1.6
Page Builder by SiteOrigin: par SiteOrigin – 2.9.2
RegistrationMagic Premium: par Registrationmagic – 3.8.1.7
Restrict Content Pro: par Restrict Content Pro Team – 2.9.10
Series Engine: par Eric Murrell (Volacious) – 2.6.1
SiteOrigin Widgets Bundle: par SiteOrigin – 1.13.3
The GDPR Framework: par Data443 – 1.0.20
WonderPlugin Tabs: par Magic Hills Pty Ltd – 5.8

Active MU Plugins

api-hacks.php: par –

Theme

Name: Twenty Seventeen
Version: 1.7
Author URL: https://wordpress.org/
Child Theme: Non – Si vous modifiez Give sur un thème parent que vous n’avez pas personnellement créé, nous vous recommandons d’utiliser un thème enfant. Voir Comment créer un thème enfant

@kakshak

This comment has been minimized.

Copy link
Member

commented Dec 5, 2018

Slack Call Summary

Participants: @kakshak @ravinderk
Topic: Discussion about the focus issue
Results: We have discussed that if the user leaves the amount field and move to another field ( like a first name or last name ) then it's a default behavior that user should know about that which level user is into and if user wants to change that then he/she can customize the CSS for the website.

@kakshak

This comment has been minimized.

Copy link
Member

commented Dec 5, 2018

@kevinwhoffman I've check that and I think it's a default behaviour of Give plugin. So, user will know in which level currently he/she is. If user wants to edit that focus then I've provided the solution that can be implement for the user speicific website.

Please let me know your thoughts on this.

Video

https://www.useloom.com/share/572bf70c80af42749178af0f0cfbb18c

@Benunc

This comment has been minimized.

Copy link
Member Author

commented Dec 11, 2018

Thanks for the clarification @kakshak. In my tests the other day I wasn't seeing this default behavior... which is likely a mistake on my part, I see it now regardless of language.

I still think this needs some attention from a user experience perspective.

I'd expect the amount to stay colored even once the user has moused into another field. Perhaps style based on give-default-level instead of (or in addition to) on focus.

This would also alleviate this user's problem, which is that it takes two clicks to get into the field to enter the First Name if you come directly from the amount field.

I will set expectations accordingly with the user, either way.

Thanks!

@kevinwhoffman

This comment has been minimized.

Copy link
Member

commented Dec 11, 2018

@Benunc I agree that it should only take one click to jump from the amount field to the name field. The selected button style should also be maintained regardless of focus.

The likely explanation is that some JavaScript is hooking into the blur event of the amount field and preventing default behavior that would otherwise focus on the name input. This blur event only happens on the first click, which is why the second click works.

@kevinwhoffman kevinwhoffman changed the title fix: resolve focus on French-translated installs fix: improve focus behavior in multi-level forms Dec 11, 2018

@kevinwhoffman

This comment has been minimized.

Copy link
Member

commented Jan 10, 2019

Punting this to 2.4.1 as it's a minor UX improvement that still needs further investigation.

@mathetos

This comment has been minimized.

Copy link
Member

commented Jan 29, 2019

Related to this, users have asked for a long time to allow the custom amount to be the default option. The only way we can do that currently is with a jQuery snippet that focuses on the amount field. When that happens, we should ensure that the Custom Amount button maintains focus.

Here's the snippet:
https://github.com/impress-org/give-snippet-library/blob/master/form-customizations/auto-focuse-on-amount.php

DevinWalker added a commit that referenced this issue Feb 7, 2019

Merge pull request #3990 from impress-org/issue/3889
fix: improve focus behavior in multi-level forms #3889
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.