EdgeNavigator Issue

How-to Discussions
1

Hi guys,

I need a little help here.

I have a edge navigator on my app and it was working fine. Since the update to 1.8.0 it stops working.

I made a minimal reproduction with this issue. It’s a simple edge navigator and a button to open it.

<App>

    <!-- Opens the left edge menu -->
    <UserEvent ux:Name="requestMenu"/>
	<OnUserEvent EventName="requestMenu">
		<DebugAction Message="REQUESTING MENU" />
		<Set edge.Active="menu"/>
	</OnUserEvent>

	<!-- Closes the left edge menu -->
	<OnUserEvent EventName="dismissMenu" Handler="{dismissMenu}"/>

	<EdgeNavigator ux:Name="edge">
        <DockPanel Color="#955CA1" Edge="Left" ux:Name="menu">
            <ActivatingAnimation>
				<Change block.Visibility="Visible"/>
				<Change block.Color="#0005"/>
			</ActivatingAnimation>

            <StackPanel>
                <!-- Build the options in the menu -->
                <Each Items="{menuOptions}">
                    <MenuOptions Text="{text}">
                        <Clicked>
                            <Callback Handler="{gotoSelectedPage}"/>
                            <RaiseUserEvent EventName="dismissMenu"/>
                        </Clicked>
                    </MenuOptions>
                </Each>
            </StackPanel>
        </DockPanel>

		<Panel>
			<Rectangle Layer="Overlay" Visibility="Collapsed" Color="#0000" ux:Name="block"/>
		</Panel>
	</EdgeNavigator>

    <!-- option on the menu -->
    <Panel ux:Class="MenuOptions" HitTestMode="LocalBounds" Margin="0,0,0,35">
        <string ux:Property="Text" />

        <!-- Text for the option -->
        <Text Value="{Property Text}" FontSize="17" Margin="15,0,15,0" Alignment="CenterLeft" Color="White"/>

        <!-- Animation -->
        <WhileInactive Threshold="0.4">
            <Move Target="this" X="-180" Duration="0.3" Delay="0.3" Easing="CircularIn" />
        </WhileInactive>
        
    </Panel>

    <!-- A button to open the menu -->
    <Button Text="Click Me!" Clicked="{click}"/>

	<JavaScript>
        var Observable = require("FuseJS/Observable");

		function dismissMenu() {
			edge.dismiss()
		}

        function click(){
            console.log("click")
            requestMenu.raise();
        }

        var options = [];
        var menuOptions = Observable();

        function setOptions(){
            options = [];
            menuOptions.clear();
            options.push({"text" : "Option One"});
            options.push({"text" : "Option Two"});
            options.push({"text" : "Option Three"});
            options.push({"text" : "Option Four"});
            options.push({"text" : "Option Five"});
            menuOptions.replaceAll(options);
        }

        setOptions();

        module.exports = {
            dismissMenu : dismissMenu,
            click : click,
            menuOptions : menuOptions,
            setOptions : setOptions
        }

	</JavaScript>

</App>

The issue is that I cannot click on the button when I have the edge navigator, if I comment the edge navigator code then I’m able to click it. This does not happen on version 1.7.9. Is this a bug in Fuse?

Does anyone have any idea how to solve this issue?

Thank you in advance.

2

Hi Ana,
this looks like a potential regression, so I’d suggest you log a ticket on fuselibs repo so community can take a look at this.