Panel Card Fails to Display Using Next Button

[Pizzadude]

Build 6232_5386

This is a strange one. It only happens on iOS. It does not happen in working preview, live preview, or on a PC.
So to test the attached sample component it needs to be published.

I began seeing a seemingly random problem where a panel card does not display when navigating to it using the Next button. The problem does not happen when navigating by swiping.

The sample component is a very simple UX designed to demonstrate the problem. It is designed to run in a browser. I am testing on an older iPad and an iPhone 11 ProMax, both running iOS 13.2.3.
The behavior I am describing is when running Chrome on iOS. Safari has even stranger problems.

Running it as is has no problems while using the Next button.

But then refresh the browser, and while still viewing PANELCARD_1, click the "Add Text 1 to Text 2" button. This fetches the value in the Text_1 control and appends it to the value in the Text_2 control:

var _1 = {dialog.Object}.getValue('Text_1');
var _2 = {dialog.Object}.getValue('Text_2');
{dialog.Object}.setValue('Text_2',_1 + _2);

Now use the Next button to navigate to Panel 3, where the Text_2 control is. Panel 3 does not display.

It will display by tapping on the screen, or navigating away from and back to Panel 3.

Move the Text_2 control to Panel 2 and the problem goes away. Of course, that is not an option in my production UX.



TestPanelNavigation.zip

[Davidk]

Re: Panel Card Fails to Display Using Next Button

The problem is that you've got CRLF and Tab characters in the default text... it's formatted text... and that is messing up Alpha.

Put your cursor into the Type property... and then tab into the Default value property. You'll see you now have scroll bars... and you shouldn't have. Now try to tab out of the Default value... you'll actually add in a Tab character... not tab to the next property.

If you copy the Lorem ipsum text below and replace your Default value with it, you problems will go away.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Your default value should actually be ="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

and not just the text. I don't care if it works without the =""... you're just begging for trouble if you don't include it.

Further, your Back button displays on PanelCard_1. Is that what you want?

[Pizzadude]

Re: Panel Card Fails to Display Using Next Button

I copied and pasted this into the default values for both text controls:

="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

I get the same results.

I've done some experimentation...

I changed the default text in Text_1 to ="Add one line of text".

I left the default in Text_2 the same as above: ="Lorem ... laborum."

Now, if you tap the button enough times, and then tap the Next button twice, Panel 3 will not display.

It seems as if the amount or size of the data in Text_2 causes the problem.

If I change the last line of code on the button to:

{dialog.Object}.setValue('Text_2',_1 + "\n\n" + _2);

Adding "\n\n" makes it easier to demonstrate the problem.

Now the magic number is 7. Tap the button 6 times and Panel 3 displays just like it should. Tap it 7 times and Panel 3 does not display.

All the controls in Panel 3 are not displaying, not just the text area control.

And why would this only happen on iOS?

And why does it not happen if navigating using a swipe? Why only the Next button?

Also, I have only seen this when using panels. In my production app I have many controls that are updated by appending text to the existing value, using crlf(). I've never had a problem when using containers, and not panels.

[Pizzadude]

Re: Panel Card Fails to Display Using Next Button

Here is an updated version of the sample UX.

All text controls are deleted.

In Panel 3 there is a list control populated by static data.

Navigate from Panel 1 to Panel 3 using only the Next button, and Panel 3 does not display.

Navigate from Panel 1 to Panel 3 using a swipe, and Panel 3 will display.

Again, this must be published and opened on an iPhone or iPad to see this behavior.

TestPanelNavigation.zip

[Davidk]

Re: Panel Card Fails to Display Using Next Button

This feels like an Alpha bug. There is little to no testing at Alpha on iOS. I can confirm this issue. Nothing I do seems to cause the panel card contents to display.

A PanelCard refresh() introduces another bug... and doesn't help... so... there you go.

This behaviour is similar to your other problem... https://forum.alphasoftware.com/show...ide-expression.

While on Panel 3, if you tap the panel... or induce any movement on that panel, the panel contents will display. This is why swiping works, but the next button doesn't.

Your biggest problem is getting Alpha to listen, and then look at the problem. You've got a sample, it's easy to replicate using "Remote Test" (you don't need to publish), but getting Alpha to take is seriously is another story.

[Davidk]

Re: Panel Card Fails to Display Using Next Button

Here's a temp fix... until (if) you can get Alpha to have a serious look.

In PanelCard_3, in its onActivate event... put this code...

setTimeout(function(){
	var id = $('{dialog.ComponentName}.R1.PANEL.0.PANEL.2.BODY');
	//scroll 'element1' to top, left
	A5.u.element.setScroll(id,1,0);
	A5.u.element.setScroll(id,0,0);
},25);

Here we are using .setScroll() to move the screen by 1 pixel, and then back again. You shouldn't notice any movement or delay in seeing PanelCard_3 because it's all happening so fast.

It's that 1px movement that is causing the screen to redraw... and therefore display PanelCard_3 contents.

This is definitely a bug.

[Pizzadude]

Re: Panel Card Fails to Display Using Next Button

I just sent a bug report. I will apply your pixel fix, thanks. Right now this is affecting a production app. Not too serious, as a swipe will still work. But I have spent a LOT of time on this.

[Pizzadude]

Re: Panel Card Fails to Display Using Next Button

It is an Alpha bug. Selwyn says it is fixed, but there will not be a hotfix for the current official release 6232_5386.

He suggested not using the built in Next/Pre buttons, but instead use {dialog.object}.panelSetActive() on the buttons.

That seems like a lot of trouble when using a lot of panels and dynamic panels.

The "Pixel Fix" works great, and can be easily removed after Alpha releases a version without the bug. Thank you David.