Hey @darylawilder I found a workaround for now to not have commas or spaces so the number is stored like this:
So here’s the step-by-step (though I feel that there may be easier ways to accomplish creating a keyboard like this! It was just the only way I could think of for now. 
)
To start, I created a new Data Type called Phone Button:
Then I opened Excel and created a single column with 11 rows of each number (1,2,3,4,5,6,7,8,9,0) or symbol that we need to display in the keyboard, as well as one entry for * and one entry for #. To get this to work, I needed 100+ app data entries, so instead of manually creating them in Bubble, I created the spreadsheet below and saved it as a CSV:
After saving that, I uploaded it to the App Data: Phone Buttons. After clicking the ‘Upload’ button, I selected ‘Phone Number’ as my Data Type, uploaded the CSV (“Numbers”), ‘Validated’ the data, and then clicked ‘Upload’:
After that, everything is displayed as an entry within the App Data tab:
After uploading the data, I went back to the UI editor and created the Input element (for the phone number), and 12 repeating groups, each containing one for each of the keyboard’s button. Each repeating group’s Type of Content is Phone Button, and the Data Source is Do a Search for Phone Buttons, with the constraint for each search that the Number must be equal to the value we manually enter depending upon the position of the repeating group in the keyboard. For example, the first repeating group setup could look like this:
And the second is the same, except for the Phone Button’s Number must equal 2:
And that process continues for the rest of our keyboard button repeating groups. The next step is to set up the dynamic data for each of the blue Buttons. The dynamic expression for the text of the button is “Current cell’s Phone Button’s Number”:
So now we have everything set up display-wise We just need to set up the workflows and make sure that the numbers a User entered is displayed correctly within the Phone Number input. To do this, I set up this workflow on each button within every repeating group:
"When Button 1 is clicked → Element Actions → Set State → Element: phone_keyboard (setting a custom state on the page), Custom State: create a new custom state…
Here, the custom state is going to ‘keep track of’ the numbers that a User has clicked. Fortunately, this is using custom states which don’t use any workflows. The custom state will store this number, and we won’t need to make any changes to the database or use any workflows until the User clicks Save.
After the custom state is created, Bubble needs to know what the value of it needs to be when that keyboard button is clicked. Since the custom state is storing a list of Things (or, a List of “Phone Buttons”), we want the List to add all numbers that a User clicks on to this custom state list. So the value would be setup in this way:
Here we’re just telling Bubble to add the number which the User just entered to this list of numbers (represented by the custom state Phone Number, which is a list of Phone Buttons). In the “when statement” there is also a condition that the numbers are only added to our list when the list count is less than 10:
This next part is a little confusing to explain, but the reason I created 11 copies of each number in the App Data is because if I only created one ‘entry’ for each Phone Button (1,2,3,4,5,6,7,8,9,*, 0, # only), the Phone Number list of Phone Buttons would not save the same data entry more than once. For example, if we didn’t create all of the entries, and a User tried to enter 555, the Phone Number custom state would only add 5 one time; the Phone Number already contains that entry. To workaround that, I created the 11 entries so that the same ‘number’ can be added multiple times. Then I added :filtered to each repeating group with the following Advanced Constraint:
Here we’re just saying that every repeating group should only display entries that aren’t already within our Phone Number list. So you can’t ‘see’ this happen in preview mode, but when a User clicks on the 1 button, that individual entry is added to our Phone Number, and the ‘next item’ 1 is displayed in the repeating group and ready for the User to click on and add to the Phone Number custom state. That way, Users can enter the same number multiple times as needed.
So now every time a User clicks on the keyboard, that number is added to the Phone Number custom state. The next step was to create the workflows needed for the backspace button. Though we were able to use the :plus option when adding items to our Phone Number custom state, Bubble doesn’t have a :minus option in order to remove items from our Phone Number. The workaround for doing this is to use :filtered in this case as well, where we just need to set the workflow up in this way:
This part is really tricky to explain, but will definitely make more sense the more you use it; but here we’re just telling Bubble that any Phone Buttons with a unique ID that matches our Phone Number’s last item (the most recently clicked number by the User), can’t be in our Phone Number list, and must be filtered out of it, or removed.
For example, if a User entered 123454 and pressed the backspace button one time, Bubble would only remove the 4 on the far right (not both 4s). This is because each 4 (all 11 of them each have their own unique IDs).
The next step I did was just to set up the initial content of the Input to be this:
And then created a Phone Number field within the User Data Type:
This is where I had some trouble figuring out how to replace the spaces and commas (and I believe there is a more efficient method than the workaround I found, such as: using a regex pattern) but for now, to remove the commas I created a ‘Do When Condition is True’(every time) event in the workflow:
And in that workflow, we’re stating that every time the Phone Number reaches a count of 10 items, set the following custom state:
Element Actions → Set State → Element: phone_keyboard, Custom State: create a new custom state… (I named this No Commas to help me remember but you could name this anything you choose).
And the value will be:
Here I just set the state of the the No Commas [Phone Number text] to be Input Phone Number’s value with the :find and replace option. Find and replace finds the commas and replaces the commas with nothing (so we’re just removing the commas from the value). Then I needed to get rid of the spaces within the text, so I set another action in the workflow which was:
Here it looks like nothing is there, but there is a single space in the ‘Text to find’ input, and the Replace by Input is blank. This then removed the spaces from the number.
Last but not least is to make sure this phone number is saved to the User. Here I created a condition on the workflow which is When Save is clicked and when the Phone Number: count is 10 (the User filled out a complete, 10-digit phone number), to then proceed and save that number to the User. The workflow looks like this:
*When Save is clicked and when phone_keyboard’sPhoneNumbercount is 10" → Account → Make Changes to Current User → Field to change: Phone Number, Value = phoneKeyboard’sNoCommas. This way, the phone number is saved like this:
Then I just have one more action in the workflow to reset the Phone Number custom state to empty:
And that is everything! I think there are definitely other ways to accomplish creating this keyboard, but for now I believe this will work and save everything correctly. Please let me know if anything was confusing/didn’t make sense or if you have any questions. Or, if anyone has any suggestions on a better method please feel free to make changes of course.