[BUG]: Calendar Control Automatically Hiding

[justatheory]

Describe the bug

Calendar control is briefly visible then immediately hides without user interaction.

I have a text input to display the selected date from the calendar control. The text input's OnSelect property toggles a boolean variable (varShowCal) to control the visibility of the calendar control. If the calendar is hidden it sets varShowCal to true. If the calendar is displayed it hides the calendar by setting varShowCal to false.

The OnChange property of the calendar control sets varShowCal to false. In the published app when clicking the text input the calendar is briefly displayed before hiding automatically. It appears the OnChange of the calendar control is triggered the moment the user clicks on the text input which sets varShowCal to false and hides the calendar.

This automatic hiding only occurs the first time the text input is selected. This behaviour does not happen in the Power Apps editor experience.

To Reproduce
Steps to reproduce the behavior:

1. Add text input and in OnSelect add UpdateContext({varShowCal: !varShowCal})
2. Add calendar control. In the visible property of the calendar control add varShowCal
3. Add UpdateContext({varShowCal: false}) to calendar control's OnChange property
4. Default property of text input is set to Text(Calendar_1.SelectedDateValue,"ddd dd mmmm")

Expected behavior
I would like to click on the text input and have the calendar control display until the user selects a date or the text input is selected.

Additional context
This method works in an older app. I have updated the component in this app and replicated the functionality in a test app but in the test app it doesn't work. It appears OnChange is being fired when I set the visibility to true by clicking on the text input. The OnChange then hides the calendar without user input. When the user clicks the text input a 2nd time the calendar control works as expected.

[justatheory]

Edited to correct grammar.

[denise-msft]

@justatheory thanks for your feedback and interesting scenario!

First of all, are you developing this in a canvas app or custom page?
It sounds like you're trying to replicate the Fluent UI DatePicker control that's available in custom pages. I recommend using that if you're using custom pages.

This behavior is happening because the value of SelectedDateValue changes from blank to the current date when you toggle the visibility of the Calendar (when it's hidden, the value is not set to anything). Therefore, a change is detected by the component and fires the OnChange event.

As a workaround, you can try adding an additional context variable that covers this first load situation:

Screen.OnVisible:

UpdateContext({ init: true })

Calendar1.OnChange:

If( init,
UpdateContext({ init: false });
,
UpdateContext({ varShowCal: false });
)

[justatheory]

Hi Denise, Thank you for your response and suggestion for a workaround. I will give it a try. I’m doing this in a canvas app. Many thanks, Dean Moran

…

On 21/12/2022, at 13:09, Denise Moran ***@***.***> wrote: @justatheory <https://github.com/justatheory> thanks for your feedback and interesting scenario! First of all, are you developing this in a canvas app or custom page? It sounds like you're trying to replicate the Fluent UI DatePicker control that's available in custom pages. I recommend using that if you're using custom pages. This behavior is happening because the value of SelectedDateValue changes from blank to the current date when you toggle the visibility of the Calendar (when it's hidden, the value is not set to anything). Therefore, a change is detected by the component and fires the OnChange event. As a workaround, you can try adding an additional context variable that covers this first load situation: Screen.OnVisible: UpdateContext({ init: true }) Calendar1.OnChange: If( init, UpdateContext({ init: false }); , UpdateContext({ varShowCal: false }); ) — Reply to this email directly, view it on GitHub <#213 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB6CK33KSM6E5YLYYLTNY2LWOJDEVANCNFSM6AAAAAASWADYEY>. You are receiving this because you were mentioned.

[justatheory]

@denise, I tried your workaround and it worked! Thank you for your help.