Intermittant Panel Open failure

Questions
1

Version: Framework7 5.7.5

I have a panel which works most of the time but then will suddenly stop opening. I added JS that writes to console.log so I can verify the click is recognized. I also added JS to show when the panel open/close/closed events are triggered. It always works when first entering the app. Then it stops after a while but I am not sure why.

Here is the link to the panel on the page that failed (it worked for this page moments before).

    <div class="navbar no-hairline">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left hidden" id="backLink">
                <a class="link back">
                  <i class="icon icon-back"></i>
                  <span class="if-not-md">Back</span>
                </a>
            </div>
            <div id="pageTitle" class="title" align="center"></div>
            <div class="right" align="center" onclick="JavaScript:debugLog('div-clicked User Icon');">
                <a href="#" data-panel=".panel-right" class="panel-open icon-only">
                 <i class="fas fa-user"></i></a>
            </div>
        </div>
    </div>

I even tried making my debugLog JS function call:
app.panel.open();
… but that does not open the panel either even though console.log verifies it is being called.

If I refresh the browser then go back in it will work… for awhile then break again.

Any ideas?

2

I have a similar problem - a series of right panels will open as required but only when selected in order (see code below). If any panel is selected at random then further clicks for other panels are ignored…

I have seven right panels (panel-right-1 through panel-right-7) each with this code at the bottom:

<span onclick='showFirstTip()'><i class='icon icon-mapping' style='margin-bottom: 12px; outline: 1px solid #7e7ee5; outline-offset: 1px;'></i></span>&nbsp;&nbsp;
			<span onclick='showSecondTip()'><i class='fad fa-map fa-2x jpThamesIcon'></i></span>&nbsp;&nbsp;
			<span onclick='showThirdTip()'><i class='icon icon-lock' style='margin-bottom: 10px'></span></i>&nbsp;&nbsp;
			<span onclick='showFourthTip()'><i class='fad fa-water fa-2x' style='color:#7e7ee5'></i></span>&nbsp;&nbsp;
			<span onclick='showFifthTip()'><i class='fad fa-cloud-sun fa-2x' style='color:#ffbb00'></i></span>&nbsp;&nbsp;
			<span onclick='showSixthTip()'><i class='fad fa-road fa-2x' style='color:grey'></i></span>&nbsp;&nbsp;
			<span onclick='showSixthTipa()'><i class='fad fa-download fa-2x' style='color:green'></i></span>&nbsp;&nbsp;
			<span onclick='showSeventhTip()'><i class='fas fa-plus-circle color-orange fa-2x'></i></span>

The code to open each panel is:

function showFirstTip () {
var panel = app.panel.open(’.panel-right-1’);}

function showSecondTip(){
var panel = app.panel.open(’.panel-right-2’);}

function showThirdTip(){
var panel = app.panel.open(’.panel-right-3’);}

function showFourthTip(){
var panel = app.panel.open(’.panel-right-4’);}

function showFifthTip(){
var panel = app.panel.open(’.panel-right-5’);}

function showSixthTip(){
var panel = app.panel.open(’.panel-right-6’);}

function showSixthTipa(){
var panel = app.panel.open(’.panel-right-6a’);}

function showSeventhTip(){
var panel = app.panel.open(’.panel-right-7’);}

No errors in the console and adding an alert confirms that each function is called when required (but it just does not open the requested panel)
Thanks

3

Any chance you can post your code in a JS Fiddle for us to check? https://jsfiddle.net/

Also, note that the new F7 6.0.1 has improved performance for Panels.

4

Upgraded components to v6 but app stopped working with no obvious cause (nothing in console) - so reverted to v5…