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

Use telephone fields in phone number form controls #4643

Merged
merged 1 commit into from
Dec 16, 2021

Conversation

decabeza
Copy link
Collaborator

@decabeza decabeza commented Aug 11, 2021

Objectives

Make it easier for mobile phone users to enter a phone number.

Visual Changes

Before these changes

Phone browsers shows a alphanumeric keyboard:
By focusing on the input of the phone field on a mobile device we see an alphanumeric keyboard

After these changes

Phone browsers shows a numeric keyboard which makes it easy to enter phone numbers.
By focusing on the input of the phone field on a mobile device we see an numeric keyboard which makes it easy to enter phone numbers

@decabeza decabeza added the UX label Aug 11, 2021
@javierm javierm added this to Reviewing in Consul Democracy via automation Oct 17, 2021
@javierm javierm moved this from Reviewing to Doing in Consul Democracy Oct 17, 2021
@javierm javierm force-pushed the phone_number_field branch 2 times, most recently from 4200dac to 297fbac Compare November 11, 2021 23:20
@javierm javierm changed the title Changes phone number text to number field Use telephone fields in phone number form controls Nov 11, 2021
@javierm javierm moved this from Doing to Reviewing in Consul Democracy Nov 11, 2021
@javierm javierm force-pushed the phone_number_field branch 3 times, most recently from 01bf8eb to 74f8ca2 Compare November 13, 2021 14:14
@taitus taitus self-assigned this Dec 16, 2021
Using a field with `type="tel"` causes most mobile phone browsers to
show a numeric keyboard which makes it easy to enter phone numbers.

We aren't using a number field because some browsers show "spinners" to
increment/decrement numbers (which doesn't make much sense in a phone
number) and because they don't allow characters like spaces. Phone
numbers can have characters like spaces, dashes, parenthesis, asterisks,
the plus sign, ...

Since phone number formats vary depending on the region, and sometimes
even within the same region several different formats can be used, for
now we aren't offering any kind of format validation. We could offer a
format validation that rejects just letters (although there are cases
where letters are actually allowed). However, this causes issues at both
the server side and the client side.

We could use a client-side validation adding a `pattern` attribute to
the field, but that would be something unlike anything else we use in
the application, and we would need to to write some JavaScript in order
to use a proper error message.

On the other hand, if we add a server-side validation, we might find out
existing users are invalid, and it would be impossible to update them in
the many places where we update users assuming they were valid in the
first place. We'd have to add a rake task to update existing user
records and make sure they contain a valid phone number or create a
setting so this validation only applies to new CONSUL installations.
Another option would be to add a per-form validation, so the phone
number is only validated in pages where it is introduced.

All the mentioned scenarios offer certain complexities. So, for now,
we're keeping things simple.

Co-Authored-By: decabeza <[email protected]>
Consul Democracy automation moved this from Reviewing to Testing Dec 16, 2021
@javierm javierm merged commit bcce43f into master Dec 16, 2021
Consul Democracy automation moved this from Testing to Release 1.5.0 Dec 16, 2021
@javierm javierm deleted the phone_number_field branch December 16, 2021 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants