Software keypad only able to select one input

[MCGallaspy]

On the develop branch, if multiple inputs are available, then the software keypad only writes to the "first" one. For example, this exercise could have multiple elements with .perseus-input class (which is how the sw keyboard selects its input, I believe). This is potentially an issue with Khan exercises too, though in that case I think the sw keypad selects the input element by ID(?) which might suggest it's meant to be unique.

[rtibbles]

I think the original design was intended to just disable the software keyboard when there were multiple inputs, although it is very likely that this is broken now with the Perseus integration.

The most reasonable design seems to be to add a 'next input' button to the software keyboard, which would be made visible if there were multiple inputs. Alternatively, we could just add an 'enter' key which would cycle, and submit once inputs were exhausted.

[aronasorman]

I feel that this isn't critical for the release. @cpauya why do you think this is a blocker?

[cpauya]

If we have another form of input, aside from the keypad, we can remove the "high priority" flag.

@amodia can you put another example of the exercise using text boxes with screenshots?

[mrpau-richard]

Hi @MCGallaspy and @rtibbles i replicate this issue on this exercise http://127.0.0.1:8008/learn/khan/math/early-math/cc-early-math-counting-topic/cc-early-math-counting/count-from-any-number/ but i have a problem on the textbox focus i can't identify the selected textbox of the user when keypad is active because the textbox is readonly.

[MCGallaspy]

@amodia I'm not sure I understand the problem. Can you elaborate?

P.S. On line 20 of software-keypad.js all the input elements are selected and stored as an array this.inputs, so you should be able to access them that way. Can you implement a button that simply loops this.field of the SoftwareKeyboardView through the available elements in this.inputs?

[rtibbles]

As @MCGallaspy says, this is the desired behaviour. The inputs are readonly on purpose, as it prevents a tablet on screen keyboard from popping up when the keypad is shown.

[mrpau-richard]

Yup thanks I'm still working on this now @rtibbles

[mrpau-richard]

@MCGallaspy my progress for today is i able to create a loop on this.inputs.

and identify the input element to be used by the keypad by adding an id when user click it.

[mrpau-richard]

@MCGallaspy I have a problem on this line of code at ka-lite/kalite/distributed/static/js/distributed/software-keyboard.js.

Any suggestion how this work.

[rtibbles]

Hi @amodia - basically, this selects the particular input we want to set the value to (but only if the exercise is a Perseus exercise - if it is just a Khan Exercises exercise, it works fine for us to just set the field value directly).

The reason for this is because Perseus is using react.js, and so there is strict one-way data binding between the 'itemRenderer' object and the input fields, so if we don't set the data in this way, the value is lost.

In practice, this means that if you are allowing people to move across all the inputs, you need to just index into inputPaths[0], inputPaths[1], inputPaths[2] - depending on whether the user is on the first, second, or third input, etc.

[mrpau-richard]

Thanks @rtibbles that was very helpful.