866933 - The Firefox OS keyboard should provide an Enter key when an <Input type=number> has focus so that the user can more easily submit the form

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia, defect)

Description

[Kumar McMillan [:kumar]]

Attachment: screenshot.png

There is no enter button on the keypad for an input with type="number" so the user cannot submit the form. Is this by design to save screen real estate or something?

STR:
- Open attached test case HTML on Firefox OS
- tap the input

Expected: the keypad should let you press an enter key to submit the form just like the numeric keypad

Actual: there is no enter key so form cannot be submitted from the keypad

See bug 865682 for a real use case

Comment 1

[Kumar McMillan [:kumar]]

Attachment: test-case.html

Comment 2

[Kumar McMillan [:kumar]]

There was a typo in my description. Expected: numeric keypad ... should have an enter key like the alpha keypad

Comment 3

[Kumar McMillan [:kumar]]

Firefox OS B2G 18 (v1) branch.

Build info:
  https://git.mozilla.org/?p=releases/gecko.git;a=commitdiff;h=18cc49522838e48baff8b159b95ee6dbdf6afb6b
  https://git.mozilla.org/?p=releases/gaia.git;a=commitdiff;h=e26eadbc598bd09c80192016c1024a4a999a5361

Comment 5

[Sukant Garg [:gargsms]]

Attachment: Proposed fix

Proposed bug fix.

Needs UI suggestions. We can, however, not disturb the alignment of the 'O' key.

Comment 6

[Manish Goregaokar [:manishearth]]

Fixing the needinfo. See comment 5

Comment 7

[Sukant Garg [:gargsms]]

Attachment: Bug fix as per the last image

Comment 8

[Sukant Garg [:gargsms]]

Attachment: New patch, some glitches in last one

Comment 9

[Kumar McMillan [:kumar]]

I'm not a Gaia peer so I'm probably not a good person to review. I'd suggest pinging someone in #gaia. If the fix works then the patch will work for me :) If you have trouble finding someone to review it, needinfo me again and I can help find someone. Thanks for working on a fix!

Comment 10

[Jan Jongboom [:janjongboom] (inactive)]

Comment on attachment 8374045 [details]
Proposed fix

Casey, can you give UI feedback on this? Is this a change that UX is OK with and how should it look like in that case?

Comment 11

[Jan Jongboom [:janjongboom] (inactive)]

Comment on attachment 8374276 [details] [diff] [review]
New patch, some glitches in last one

Clearing the review flag as pending UX approval.

Comment 12

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8374045 [details]
Proposed fix

Guess we could ask for Mike's opinion on keyboard UX.

Mike, 

Could you take a look at this proposal?
Thanks.

Comment 13

[GoodMike]

Agree. We will add it into our spec in next release. Thanks for the advice, truly helpful.

Comment 14

[Omega Feng [:Omega] [:馮於懋]]

Attachment: [Keyboard]Input_type_number.pdf

After internal discussion, here is the keyboard layout for input type number.

Comment 15

[Sukant Garg [:gargsms]]

(In reply to Omega Feng [:Omega] from comment #14)
> Created attachment 8376075 [details]
> [Keyboard]Input_type_number.pdf
> 
> After internal discussion, here is the keyboard layout for input type number.

Should that be a 'Go' button or a line feed arrow?

Comment 16

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Could you please take a look at comment 15?
Thanks.

Comment 17

[Sukant Garg [:gargsms]]

The proposed layout for the number keyboard has a space key at 3x3 position. Providing a number key in any keyboard makes it susceptible for addition of a special keyboard switch key. Here is the code that says so: 
https://github.com/mozilla-b2g/gaia/blob/master/apps/keyboard/js/keyboard.js#l-587,l-737

Also, I have been trying to place the space key, and the keyboard switch key automatically appears.

IMHO space key is not a necessity in a number keypad.

Should I make another bug for this issue after the current bug has been fixed?

Comment 18

[GoodMike]

Let's just wrap everything up in this bug, no need to diverse it. The layout Omega showed was the draft proposal for the bug. So any further discussion or information or suggestions are all good. Tks.

Comment 19

[Omega Feng [:Omega] [:馮於懋]]

(In reply to Sukant Garg [:gargsms] from comment #15)
> (In reply to Omega Feng [:Omega] from comment #14)
> > Created attachment 8376075 [details]
> > [Keyboard]Input_type_number.pdf
> > 
> > After internal discussion, here is the keyboard layout for input type number.
> 
> Should that be a 'Go' button or a line feed arrow?

IMO we should use 'line feed arrow' only in 'textarea', and 'search icon' in 'search', and 'Go' for the rest of input types.

Comment 20

[Omega Feng [:Omega] [:馮於懋]]

(In reply to Sukant Garg [:gargsms] from comment #17)
> The proposed layout for the number keyboard has a space key at 3x3 position.
> Providing a number key in any keyboard makes it susceptible for addition of
> a special keyboard switch key. Here is the code that says so: 
> https://github.com/mozilla-b2g/gaia/blob/master/apps/keyboard/js/keyboard.
> js#l-587,l-737
> 
> Also, I have been trying to place the space key, and the keyboard switch key
> automatically appears.
> 
> IMHO space key is not a necessity in a number keypad.
> 
> Should I make another bug for this issue after the current bug has been
> fixed?

In both iOS (Safari) and Android (Chrome), space key is allowed in input-type:number. Maybe space key is not a necessity, but we could still keep it in the number pad because of visual balance of the layout. Or someone could suggest a better key to replace the space key.

Comment 21

[Sukant Garg [:gargsms]]

(In reply to Omega Feng [:Omega] from comment #20)
> In both iOS (Safari) and Android (Chrome), space key is allowed in
> input-type:number. Maybe space key is not a necessity, but we could still
> keep it in the number pad because of visual balance of the layout. Or
> someone could suggest a better key to replace the space key.

The space key makes the special meta key to be added automatically. Should I modify the keyboard.js file and make an exception for number type keypad?

Also, what shall I do for the PIN-type keyboard?

Comment 22

[Sukant Garg [:gargsms]]

Attachment: Number type working fine

Remaining is the PIN layout.
I still have to find where it is used.

The ␣ appears below the normal text, hence I added <sup> tag to it. It is made in the layout.js file. Mixing JS and HTML is a bad option, need suggestions for this.

Comment 23

[Omega Feng [:Omega] [:馮於懋]]

Attachment: [Keyboard] Form Filling v1.1.pdf

Here is the updated UX spec for keyboards. I've added other input types including PIN.

Comment 24

[Sukant Garg [:gargsms]]

(In reply to Omega Feng [:Omega] from comment #23)
> Created attachment 8377333 [details]
> [Keyboard] Form Filling v1.1.pdf
> 
> Here is the updated UX spec for keyboards. I've added other input types
> including PIN.

Great. I will work on it later this evening.

Anyway, how do I get the ␣ to elongate to the full button width?

Comment 25

[Omega Feng [:Omega] [:馮於懋]]

Comment on attachment 8377067 [details] [diff] [review]
Number type working fine

Please help on this patch format, thanks!

Comment 26

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8377067 [details] [diff] [review]
Number type working fine

Thanks for working on this.


However, Omega and I could not apply this patch cleanly to our gaia code base.
Could you please help check if the patch is valid.
 1. you should do the following at gaia root folder.
   | git diff > your.patch| 
 2. Or you could use github pull request feature to send your patch.

Clear the review flag to get notified when the patch is ready.

Comment 27

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

(In reply to Sukant Garg [:gargsms] from comment #24)
> (In reply to Omega Feng [:Omega] from comment #23)
> > Created attachment 8377333 [details]
> > [Keyboard] Form Filling v1.1.pdf
> > 
> > Here is the updated UX spec for keyboards. I've added other input types
> > including PIN.
> 
> Great. I will work on it later this evening.
> 
> Anyway, how do I get the ␣ to elongate to the full button width?

After discussing with Omega, it seems we're not sure about if this is required per visual design.
If we want it extendible, I guess we would need some graphic assets to allow this.

Comment 28

[Sukant Garg [:gargsms]]

Attachment: Number type fine

Sorry for not using git diff to generate the patch.

Comment 29

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8378906 [details] [diff] [review]
Number type fine

Thanks for the patch.
But sorry that I cannot give r+ here, because it would break the following case,
  <input type=text, x-inputmode=numeric>

You may take a look at UI test app > keyboard > ..., there we have many different input fields ready for testing.

Comment 30

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Sukant, 

About the patch we talked about on IRC, which will add alternative node on TEL keyboard,
could you help open another bug, so that we can attach patch there and continue the discussion?

Let me know if you have anything that I can help with.
Thank you.

Comment 31

[Sukant Garg [:gargsms]]

Attachment: Number type working fine

Sorry for being quite dormant for last few days.

Done with this bug, now moving to 974849

Comment 32

[Sukant Garg [:gargsms]]

Attachment: Number type working fine

Sorry for last patch, attached an incomplete one.

Comment 33

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8392292 [details] [diff] [review]
Number type working fine

Review of attachment 8392292 [details] [diff] [review]:
-----------------------------------------------------------------

Sukant,

Sorry that I cannot give r+ because,
 1. Now this patch seems to break the symbol page (after you press [?123] key).
 2. The font is not available on device for the space key you added.
    (Do you have a device to test this, if not, maybe we could leave it as blank for now and find an alternative later.

Thanks.

::: apps/keyboard/js/keyboard.js
@@ +594,5 @@
> +  if(altLayoutName) {
> +    var altLayoutType = altLayoutName.substring(0, altLayoutName.indexOf('Layout')),
> +        numberLayout = 'numbertelpin';
> +    if(!numberLayout.contains(altLayoutName)) {
> +      isNumberType = true;

should be false?

Comment 34

[Sukant Garg [:gargsms]]

Attachment: Fixed last errors

Fixed the [?123] key breaking, I made a typo earlier, sorry.

The Space that I have added is in accordance with the attached draft (at least it looks similar), and since it is not a special key, it has color: #fff

The symbol I used for Space is the Bottom Square Bracket Unicode: U+23B5

Needinfo'ing Omega

Comment 35

[Omega Feng [:Omega] [:馮於懋]]

(In reply to Sukant Garg [:gargsms] from comment #34)
> Created attachment 8393356 [details] [diff] [review]
> Fixed last errors
> 
> Fixed the [?123] key breaking, I made a typo earlier, sorry.
> 
> The Space that I have added is in accordance with the attached draft (at
> least it looks similar), and since it is not a special key, it has color:
> #fff
> 
> The symbol I used for Space is the Bottom Square Bracket Unicode: U+23B5
> 
> Needinfo'ing Omega

For the latest UX spec, see Bug 983043
For visual review, ni? Carol.

Comment 36

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8393356 [details] [diff] [review]
Fixed last errors

Yeah, this patch looks good to me.
However, please be informed we don't have a proper font to display "␣" symbol.

Sukant,

Could you spend some time to see if we can add that kind of symbol into "Keyboard-Symbols.woff" file in style/fonts/?

Comment 37

[Sukant Garg [:gargsms]]

Attachment: Keyboard-Symbols.woff

I added the symbol for "␣". Have a look.

Comment 38

[Jason Smith [:jsmith]]

There needs to be a patch landed here to close the bug.

Comment 39

[Omega Feng [:Omega] [:馮於懋]]

Hi All, here are some changes of UX spec, please see bug 983043 thanks!

Comment 40

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Hi Omega,

Is the spec in bug 983043 confirmed?
If that is the case, we don't need the patch here since this kind of "number keypad" won't be necessary.

Comment 41

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8395353 [details]
Keyboard-Symbols.woff

Hi Sukant,

Sorry for the late response.
I've checked out your patch with the font and it works great! Thanks.

May I know how you generate the woff font?
If it is compiled from the svg file, could you help also include both svg and woff file in a pull request?

BTW, please notice my previous comment on possible UX spec change that we may not be able to land this patch.

Comment 42

[Sukant Garg [:gargsms]]

(In reply to Rudy Lu [:rudyl] from comment #41)
> May I know how you generate the woff font?
> If it is compiled from the svg file, could you help also include both svg
> and woff file in a pull request?
> 
I used the font-forge font editor to make a new symbol for the character and then exported it to a WOFF file. It took a lot of time editing it. :p

I will see to the new specs, I was already working on the v1.5 attached in bug 983043 and implementing the new layouts. I will make a PR ASAP.

Comment 43

[Omega Feng [:Omega] [:馮於懋]]

(In reply to Rudy Lu [:rudyl] from comment #40)
> Hi Omega,
> 
> Is the spec in bug 983043 confirmed?
> If that is the case, we don't need the patch here since this kind of "number
> keypad" won't be necessary.

Hi Rudy,
Yeah it's confirmed. We'll use symbol pad #1.
And please notice that I've just updated the spec again. Just updated some symbol arrangement.

Comment 44

[Carol Huang [:Carol]]

See Bug 983043 for UX spec.