Select .on('change',... locks up UI

Questions
1

With the following code, whenever I change the select, the Framework7 UI locks up. I can’t even get the main menu to work. Swipebacks stop working. I can tab to the next control but that’s about it. If I do a hard reload or empty cache reload in Chrome the app reloads but still everything is hung and I have to close the browser window and start a new debugging session.

There are NO errors in the console.

Here’s the HTML:

        <div class="row">
          <div class="col-70">
            <li class="item-content item-input item-input-outline">
              <div class="item-inner">
                <div class="item-input-wrap input-dropdown-wrap">
                  <select id="quesAnsType" placeholder="Pick the Answer Type">
                    <option value="T">True or False</option>
                    <option value="Y">Yes or No</option>
                    <option value="M">Multiple Choice</option>
                    <option value="N">Narrative</option>
                  </select>
                </div>
              </div>
            </li>        
          </div>

Here’s the JS:

  $$('#quesAnsType').change(function() {
    if( this.value == "M" )
    {
      $$("#divMultiple").show();
      $$("#quesAnsA").focus();
    }
    else
    {
      $$("#divMultiple").hide();
      $$("#quesSave").focus();
    }
    return(true);
  });
2

Just guessing. But it looks like an infinite loop. Can you make a small fiddle. Or share the full code?

3

Well, I just spent the last hour paring down kitchensink (core) to demonstrate the problem. Tried to upload a .zip and it won’t upload.

Give me instructions on uploading the .zip (it’s not gonna get hosted on my server) and you can have it, otherwise you’ll just have to write your own example.

4

Upload it. To mega.nz or wetransfer, etc. If you want just put a password to the zip and PM me the pass. Or just leave it without pass so everyone can help.

5
6

Just test it on my pc and make a small jsfiddle.
The issue only appears if you debug the code, debugger. After i remove the debugger statement it works fine.

so i dont know, maybe an f7 error? perhaps @nolimits4web can have a look at the fiddle.

Ppetree code

Also, its kind of random. When i first select one item and continue the debugger it works of, the second time i select an item the bug happens.

7

With a little practice you’ll be able to duplicate it first time, every time! :wink:

8

did you try removing the debugger statement?

9

Removing the debugger statement doesn’t fix the underlying problem. The underlying problem is a bug in Framework7 whereby any locking condition from any source will cause an app crash. ANR’s can cause issues with the app stores.

10

Can you try this code?

   $$('#quesAnsType').change(function() {
       if( $$(this).attr('value')=== "M" )
       {
           $$("#divMultiple").show();
           $$("#quesAnsA").focus();
       }
      else
       {
           $$("#divMultiple").hide();
           $$("#quesSave").focus();
         }
       return(true);
      });