šŸ—“ [FREE Plugin] Air Date/Time Picker

@steve7 did you do what @emmanuel suggested above?
Please if you did and youā€™re still having issues kindly file a bug report.

Sorry to anyone thatā€™s encountering this problem, unfortunately there is nothing I can do as the plugin developer with these kind of issues. If bubble wants me to make any changes to the plugin code to avoid this in the future Iā€™m happy to do it, but for now Iā€™m helpless.

1 Like

Thanks for getting back to me @emmanuel

when you say, reload the editor, what exactly do you mean?

I think he means in your bubble editor go to the that has the air date time picker and refresh the page in thr browser.
Or maybe just close your bubble editor and re-open the application editor again and go to the editor page with date/time picker.

OK, I think I may have worked out what needs to happen.

The Parent Group was originally a ā€œCurrent Userā€™s User Profileā€ however when I changed it to ā€œDo a search forā€¦ā€ it works!!

This is what I suggested.

Hi @seanhoots,

Iā€™m currently working on a project that would benefit from these improvements(workflow actions). However I can live without them for now.

Just checking with you about your availability to work on them. Not pressuring :slight_smile: Just want to know if we are talking about days, weeks or months.That is if you even have a target date.

I just want to know if I should postpone as much as possible the parts where I would benefit from your changes or if I should implement workarounds.

Best,
Jon

Hi, I am getting the following error in the console:

The plugin Air Date/Time Picker threw the following error: TypeError: Cannot read property ā€˜getTimeā€™ of null
at B (eval at h.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a2b7b086ed9d7603ca151fd6bfa8aa951bf8deb4cb248b73693f45addf50683f/xfalse/x1:96:22952), :3:362)
at eval (eval at h.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a2b7b086ed9d7603ca151fd6bfa8aa951bf8deb4cb248b73693f45addf50683f/xfalse/x1:96:22952), :11:275)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/a2b7b086ed9d7603ca151fd6bfa8aa951bf8deb4cb248b73693f45addf50683f/xfalse/x1:97:11519

Anyone know what it is by chance?

Thanks,
Jonathan

@seanhoots My default date picker sits in a group that shows a popup on click. The date picker works even though the group is clickable.

Your picker sits in there the same way but when I click the picker, the popup shows instead of only the picker. Would you happen to know a workaround (except for removing it from that group). Thanks! :smiley:

@vincent56 iā€™m not sure i understand your question. Could you explain it more or show me an example?

Sorry, I guess it was late when I wrote that. I cant do a screenrecord now, but let me try again:

I have a group in the RG. When that group is clicked, a popup opens that displays the data for that cell. But that doesnt really matter for this issue.

The issue is that the air picker is also in that group. but where the default picker is able to be operated (click to show calendar, select date etc), the air picker gets overridden (is that even a wordā€¦) by the click of the group that it all sits in.

So when clicking the air picker, the picker closes immediately and the popup opens where the default picker still works.

if Iā€™m still not clear, Iā€™ll record my screen tonight.

So basically, youā€™re saying you canā€™t click the air picker at all. It behaves as if it isnā€™t there.

no i can pick it, but then immediately the popup is shown which is a result of the group being clicked (where the picker sits in). The picker then hides again.

Ah, got it. So the click action is triggering both the air picker AND the group, which is obviously undesirable as the group event launches a pop-up, obscuring the air picker.

yes, and in fact the picker hides because a popup loads. its something that the default picker doesnt have a problem with.

i found a temp solution but its not great because i need the group to be clickable :slight_smile:

Hey @vincent56, do you mind sharing a link with me in private so i could debug the issue. You can recreate a temporary page showing the issue

thanks

Sure will do now!

Hey @vincent56, Iā€™ve taken a look at the example you sent and i understand what is going on.

What youā€™re experiencing is due to how event propagation works in javascript.
Specifically what is happening here is called event bubbling.

Here is a simple test. Assuming you had a page in bubble like the image below where each rectangular color is a group. Then you created a workflow action on the click of the blue group to show a popup. The yellow and white groups do not have any workflow events defined on them.
If a user clicks on the yellow or the white group, should the popup show?
image
If you answered No, youā€™re wrong. In this case the click event workflow even though it was defined for only the blue group will be fired when the yellow or white groups are clicked.
This is called event bubbling.
In javascript most events (e.g clicks) bubble (:joy:) from innermost elements to the outermost ones unless you stop it. Event bubbling is something that may be desirable or not depending on the specific use case.
So in the above example when the yellow group receives a click event it propagates it to the white and the white propagates to the blue and the blueā€™s workflow action is triggered since we defined a workflow for click event for it.

So in your specific case you can think of the yellow group as a the air date picker. Because you have defined workflow for the background group and because for whatever reason, the picker doesnā€™t stop the click event propagation, it triggers both its own calendar and also bubbles the event down to the containing group.
But lets say in the above example we had defined a workflow for the white group, even if the workflow didnā€™t have any action, the click event on the yellow group will not propagate to the blue because it seems Bubble stops event propagation when you define a workflow for on click of a group.

If i managed to explain this well to you i think you now have an idea how to avoid your problem.
Just put the picker inside a group then in the workflow page define a new workflow event for when the group is clicked. Donā€™t add any action, this is enough to stop the event from bubbling downwards.

Here is a demo page i put together demonstrating this concept for you or anyone interested.
https://testlinkedlist.bubbleapps.io/version-test/test_date_picker?debug_mode=true

Now you may be asking why the default date picker doesnā€™t behave this way. This is because the picker might be stopping event propagation somehow.
There may be a reason or not why the library that the air date picker is based on doesnā€™t stop event propagation. I could add code to stop this but unless i know exactly why it wasnā€™t done in the first place iā€™m reluctant to modify the code.

Here is a very nice article and simple article on javascript event propagation for you or anyone who may be interested.

3 Likes

You will find this method through many functions and non more than elements such as pickers,

$('#myLink').click(function(e) {
 e.preventDefault();
  });
1 Like

Yep @jarrad youā€™re right.
Just took a quick look at the bubbleā€™s date picker code and they stop event bubbling in several cases.
Here is an example code from the pickerā€™s library

 // On focus/click, open the picker.
            on( 'focus.' + STATE.id + ' click.' + STATE.id, function(event) {
                event.preventDefault()
                P.open()
            })
1 Like

Its a great little method the only issue is when you come across something you really want it to work right withā€¦ bubbleā€™s for daysā€¦ its good for things like swapping what keys actually fire when a key is pressed.

1 Like