Adding to previous topic: “Create an input from a button” (reference link at bottom of this post)
Example of what I’m trying to do: Mac/Win calculator app–where input changes on EITHER on-screen button click OR keyboard input.
Like those apps, the only “navigation” would be by entering or clicking a number or backspace.
It’s especially nice UX that the on-screen buttons on the calculator apps “simulate a click” when the user types a number on their keyboard…but that’s not required!
Looking for: suggestions to try or examples of similar bubble functionality. I will update the topic if I make any progress.
I cloned the example keypad from the prior forum topic, removed unnecessary bits, and played with hidden inputs, custom states, and workflows but am getting nowhere.
Please clone the index page if you want to a new page if you want to experiment!
I doubt I will be adding more at this point unless someone figures out workarounds for the limitations listed below.
Value? Better UX: input using touchscreen OR keyboard without pressing enter (with bubble limitations/bug below) using same element that can be styled vs. stock dialpads, etc so UX is same regardless of user’s device.
Use cases: Capture specific-length strings like Telephone, Zip Code, PIN, etc.
How it works: touch keypad is built from previous forum example referenced in original post. Added simple workflow steps to direct focus to two dropdown inputs hidden behind the white “output text” that respond to keyboard input (only numbers in this example). Four workflows with two custom states “merge” the keyboard input with the “output text”. Conditional formatting accounts for keyboard input and “simulates” an on-screen button press.
Since user doesn’t have to press enter after each “input”, this approach can be modified to simplify number inputs like the examples above, or probably even alphanumeric strings.
Bubble Limitations:
I couldn’t figure out “mobile version” so simple workflow disables “keyboard input” (disables the two dropdowns) if the screen width is < 800. Unfortunately if desktop browser is minimized below that size, the keyboard input doesn’t work. Something that I’m sure is fixable but I don’t know how to do it…help?
If desktop user clicks on any area outside of the “on-screen number keys”, the hidden inputs lose focus and prevent further keyboard input until an on-screen number key is pressed (whose workflow then resets the focus and restores keyboard input).
Backspace, delete, enter keys, etc also break the workflows causing the hidden inputs to lose focus. Bummer. On-screen “delete” button is only way to “backup”
After 12 digits of input, bubble’s math breaks down and results in only zeros being added. I think that’s “designed precision” not a bug?
Since I’m hacking Bubble’s dropdown/autocomplete and adding digits based on a “change” in the dropdown’s value (again without pressing enter), two dropdowns are needed in order to account for successive entries of the same value. Each workflow for one dropdown just set the focus to the other dropdown after it gives it’s “digit”
Bubble Bug:
Dropdowns contain static lists “0,1,2,3,4,5,6,7,8,9,00,11,22,33,44,55,66,77,88,99”. They look like text entries (00) but Bubble seems to try to deal with them as numbers. When I just had single-digits in there, the dropdown’s response to two contiguous numbers often failed. When I added the double-digits, the double-digits get selected correctly with a single keypress/input, ie, pressing “5” on keyboard always selects “55”, except for 0, 00 never gets selected. The workflows just use the double-digit number / 10 - 0.5 rounded to 0 to get the correct “single-digit value”. (I could have probably deleted some of the entries that don’t seem to work but didn’t want to tempt fate.)
Other Issues:
Works better in Chrome on Mac/Win/Android. Safari gets sluggish for some reason. Didn’t test on iphone.
