Forum Documentation Showcase Pricing Learn more

Bubble Developer Kit

Hi @gaurav! I’ve got a few ideas for the next release of bdk Phone number input:

  • Support for an English-only country names (i.e. no local names in the list; there are a lot of usecases for something like that, especially when building tools internal to U.S. companies);

  • Support for fetching flag emojis from the element (the same way we can now fetch, say, the two-letter ISO code);

  • Support for moving through input form by pressing the Tab key (currently, when I move through the input form that way and the phone input field comes up next, first two tab strokes are ignored and the third one finally activates it);

  • Support for the “in focus” conditional (going back to the previous example for a second: when the field gets activated, there’s currently no visual indicator it’s in focus and no direct way to style it using the Conditionals tab).

Anyway, just a few suggestions from a customer. :slightly_smiling_face: Thank you and keep up the great work!

1 Like

@gaurav FWIW, the issue @reger-alexander described above should probably have much higher priority than anything from my wishlist. I’ve just encountered the very same bug he had when I placed a Phone Number Input in a group that’s inside of a popup. :confused: (In my case, the layout breaks in Safari and Chrome.)

@gaurav One more bug to put on your radar: when the phone input is not set to fixed width in responsive settings, it breaks, the country section disappears entirely, and — for all practical purposes — the whole thing turns into a regular text input, breaking any form validation in place.

This is fixed. Please update the plugin.

Don’t believe this is the case. I’ve changed the demo app editor from fixed width to responsive so you can have a look here. If the input is converting to usual input the way you mentioned, it could happen if the library didn’t get downloaded due to connection issue.

New Plugin Added !!

Check it out here!

@Bubble it seems I’m unable to update the original post #1 on this forum thread… could you help?

New Plugin Added - Google Maps (bdk)

1 Like

Hi @gaurav
The new date, time range plugin is the same thing that the Air DateTime Picker from @seanhoots (that is free) no? Maybe you can explain what this one add that is not available in the other plugin?

Thanks :wink:

I think you may have checked the datepicker (bdk) plugin (which is #9 on the list).

The date / time / range / zone picker plugin which I published couple of weeks ago is different (#18 on the list) which I’m pretty sure is not the same as Air DateTime plugin

I checked the #18 not the #9. The #9 is more similar that the Air DateTime Dropper I think

Oh I see. I honestly haven’t used the other plugin so can’t specifically tell you the differences (maybe give it a try?). But if I were to take a guess - the ability to set a timezone in the bubble editor element for the bdk one is unique compared to other datetime pickers.

Ok thanks

@gaurav,

What I’ve been looking for is a time-only picker. Failing to find one, I created a reusable element that pretty much does what I need.

image

Hopefully, you can see the element here:

I’m not familiar with sharing apps publicly, so I hope it comes across and you can see but not edit it.
Here’s the “live” version:

I’m using the Bubble date picker and Air Date/Time picker for setting values in the sample page.

For my purposes, increments of 5 minutes is fine.

It’s pretty clunky, using repeating groups and a data type storing the time pieces (hour, minute, am/pm), but . . .
So far it seems to work as intended although I haven’t tried it on a phone or in a group focus or floating group.

I know I’m not the only one who wants a simple, clean time-only picker as a plugin that works on phones and in floating group and group focus elements.

Are you interested in doing something like this?

@laurence the Air datetime picker allow you to only use time picker and set interval. I guess that is the sane eith the one from gaurav. After, you can use :extract to only have the hour and minutes

1 Like

@Jici,

The sliders on Air Date/time Picker are finicky in general, and especially awkward on phones. Also, Air Date/time Picker doesn’t work properly on a Group Focus element. It hides the Group Focus after date or time is picked, messing up the UI intended by using the Group Focus.

Here’s a general problem with UI: what works well in a computer browser, with mouse, doesn’t always work well on a phone. What generally works well on a phone, i.e. with touch, doesn’t always work well or at all on a tablet. Here’s an example: Drag-drop on a Tablet?

Device and browser variations make UI development in Bubble an expensive trial and error (frequently error) process.

Simple plugins are needed that work reliably and consistently on computer and phone, and within any Bubble group element. Not necessarily fancy, just reliably functional.

1 Like

The bdk date/time/range picker has the same problem as Air Date/Time Picker and many other elements: When used in a Group Focus, it prematurely closes the gf.

I can’t really show you what’s going on. In the snip below, as soon as it lost focus (clicking on the screen image snipper outside the Bubble app), the bdk picker began to fade away:

image

Interestingly, in this scenario, the gf remained visible. However, when I choose a date or time from the picker, both the picker and gf go away.

Bubble’s date/time picker hasn’t had such problems. When a date is picked, the picker closes without taking the gf with it:

image

Since Bubble has made this work, it seems like the solution must be available to plugin developers to work well with Group Focus.

EDIT:
after posting this and returning to the app, I noticed errors in the debugger:

Sorry, we have encountered an unexpected error. Please file a bug report (Help -> Report a bug), including error code 1571886798448x832926146958972500 and a step-by-step explanation of how to reproduce this issue.

20:13:11

Element bdkPickWhenDone

The plugin Date/Time/Range Picker (bdk) / element Date/Time/Range Picker threw the following error: TypeError: b.data.publishInitialContent is not a function at eval (eval at m.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1927713), :12:8) at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1952086 (please report this to the plugin author)

20:13:11

Element bdkPickWhenDone

The plugin Date/Time/Range Picker (bdk) / element Date/Time/Range Picker threw the following error: ReferenceError: spacetime is not defined at eval (eval at m.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1927713), :5:1) at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a804149b996ba07507ca58733de861843b71b5a900da1d111446d0cafad01224/xfalse/x5:13:1951853 (please report this to the plugin author)

@gaurav Does Floater work on hidden groups? I coudn’t get it working in my testing

Hello @gaurav

Would it be possible to localise the country names for the Phone Input plugin? This way, the user can look up the country based on the language set.

Ideally there could be a setting in the plugin to pass the language to localise the countries’ names.

Regards.

Hello @gaurav, would you be so kind to just inform me if you would consider to localise the country names to your Phone Input plugin?

Not sure what JS phone input script you are using, but some (such us International Telephone Input already provide the localised country names.

Just so I can consider other options, as I need the country names localised.

Thanks in advance.

Hi @miguel,
Thanks for the suggestion. Can you help me understand what localize the country names means. The plugin already provides for the name in both English and Local language doesn’t it? I might be misunderstanding your request.

Cheers,
Gaurav

Hello @gaurav

Thanks a lot for answering.

You are right, the list provides the country name in both English and the local language. The problem is that the list is sorted by the English name, and the user cannot quickly find her country by typing the local name when opening the dropdown list, because it’s sorted by the English name.

Hence why I think the user experience would be improved a lot if the country names were actually displayed in a specific language (perhaps set as a parameter). This way the user could quickly type the name of her country and find the country (unfortunately not everyone speaks English…yet :).

Kind regards.