App Clips Area where System Keyboard Was Displayed

Bug Reports
1

Hi, I’ve run into what I think is a rendering bug when deploying to a Nexus 5 phone (have not checked with iOS or any other phone). If I run the code below and just press send without entering any data, the entire screen is correctly greyed out while the spinner runs (5 seconds). However, if I enter some data into the text field, then only part of the screen is greyed out. The part where the keyboard was being displayed is not. This happens even when I’ve clicked on the main form to make sure the keyboard goes away before pressing send.

The code below should run as a single MainView.ux app with a generic .unoproj file.

System Information:

  • Windows 10 Home build 16299/Intel i5 6400/8 GB Ram/No Additional Video Card

  • Fuse version 1.4.0 (build 14778)

  • Target: Nexus 5, Android 6.0.1

Code:

     <App>
        <ClientPanel>
            <ScrollView>
                <EntryForm/>
            </ScrollView>
        </ClientPanel>

    <Panel ux:Class="LoadingIndicator" ThemeColor="#1565C0">
        <float4 ux:Property="ThemeColor" />
        <Circle ux:Name="rotatingStroke" Width="50" Height="50" StartAngleDegrees="-45" EndAngleDegrees="45">
            <Stroke Width="2" Color="{ReadProperty ThemeColor}" />
        </Circle>
        <Circle Color="{ReadProperty ThemeColor}" Width="20" Height="20">
            <Timeline ux:Name="myTimeline">
                <Scale Factor=".5" Duration=".25" Easing="CircularOut" EasingBack="CircularIn" />
                <Scale Factor="2" Duration=".25" Delay=".25" Easing="BounceOut" EasingBack="BounceIn" />
            </Timeline>
        </Circle>
        <WhileFalse>
            <Cycle Target="myTimeline.TargetProgress" Low="0" High="1" Frequency=".5" />
            <Spin Target="rotatingStroke" Frequency="1" />
        </WhileFalse>
    </Panel>
    
    <StackPanel ux:Class="InputWithLabel" Width="50%">
        <string ux:Property="Label" />
        <string ux:Property="Value"/>
        <Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>
        <Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf" Padding="2">
            <TextInput FontSize="16" Value="{Property Value}"/>
        </Rectangle>
    </StackPanel>

    <Page ux:Class="EntryForm" Width="100%" Height="100%">
        <JavaScript>
            var wait = function(interval) {
                now = Date.now();
                end = now + interval;

                while (now < end) {
                    now = Date.now();
                }
            }

            var submit = function() {
                isBusy.activate();

                wait(5000);

                isBusy.deactivate();
            }

            module.exports = {
                submit: submit
            };
        </JavaScript>

        <Busy ux:Name="isBusy" IsActive="false" />
        <WhileBusy>
            <Change Target="HitTestMode" Value="None"/>
            <Change loadingBackground.Opacity="0.5" Duration=".4"/>
            <Change spinner.Opacity="1" Duration=".4" />
        </WhileBusy>

        <LoadingIndicator 
            ux:Name="spinner" 
            Opacity="0" 
            ThemeColor="#045ded" 
            HitTestMode="None"/>    

        <Panel ux:Name="loadingBackground" Color="#000" Opacity="0" HitTestMode="None"/>

        <StackPanel>
            <InputWithLabel Label="Email"/>
            <InputWithLabel Label="Password"/>

            <Button Margin="12" Text="Send" Width="15%" Clicked="{submit}"/>        
        </StackPanel>
    </Page>
    </App>
2

This looks like a bug to me, so I did some testing and logged a ticket about it. Please follow the status of it there.

3

Thanks!