What's the correct way to open routable popup/modal? Everything I try creates back button issues

1

I have a popup modal that I’m using to hold app search functionality in a single place. I’m opening it as a routable modal via routes.js. The popup is working, but every router configuration I’ve tried creates back button issues.

I’d really like to use routable modals a lot since my app has common functionality (like search) that I need to invoke from many different places. Routable modals seem to be designed to handle this type of functionality, but I can’t get past the back button issues. See below:

CONFIGURATION 1:

{
    path: '/search/',
    popup: { component: SearchPopup },
  },

Problem 1:
Back button on future pages stops working 1 page before starting point

To Reproduce:

  1. Go to /home
  2. Click on /search/ to open the search popup
  3. Perform a search
  4. Click on search result to open /item/x
  5. Once /item/x opens, click on a link to open item/y
  6. Once item/y opens, click <Back (to get back to /item/x)
  7. Once item/x opens, click <Back (to get back to /home/) :boom:

Issue:
Back button on /item/x doesn’t work, no errors, just nothing
The /search/ modal is in router history, so I’m thinking that’s the problem.

Expected:
Back button on /item/x should bring me back to my starting point /home/

CONFIGURATION 2:

{
    path: '/search/',
    popup: { component: SearchPopup },
    options: { history: false }, 
  },

Good News
Problem 1 is solved!

Problem 2.1:
Back button stops working after opening the search popup again on future pages

To Reproduce:

  1. Go to /home/
  2. Click on /search/ to open the search popup
  3. Perform a search
  4. Click on search result to go to /item/x
  5. Once /item/x opens, click on /search/ to open a new search popup
  6. Perform a search
  7. Click on search result to go to /item/y
  8. Once item/y opens, click <Back (to get back to /item/x) :boom:

Issue:
Back button on /item/y doesn’t work, no errors, just nothing
The /search/ modal is not in router history

Expected:
Back button on /item/y should bring me back to previous page /item/x

Problem 2.2
All links on starting page stop working after opening and closing the search popup

To Reproduce:

  1. Go to /home/
  2. Click on /search/ to open the search popup
  3. click <Back to close search popup and go back to home
  4. Click on any other link on /home/ :boom:

Issue:
Other links on /home/ don’t work
Error in console: Uncaught (in promise) Error: TypeError: Cannot read properties of undefined (reading 'animate') at component-loader.js:97:17

Expected:
Links on /home/ should still work after opening and closing search popup

Is there something I’m doing wrong in my configuration? I’ve read the documentation multiple times and can’t see anything that describes the correct configuration for reusable routable popups.

2

Can you create a fiddle of this problems?
For the first problem router back seems bugged for complex system, i opened a issue in github.
I fix with this code Router doesn't follow history · Issue #4076 · framework7io/framework7 · GitHub

3

A bit more intel on this issue.

When I navigate to my initial page (/home/ in the example above) and click on a link to go to another page, everything works fine. Here’s what I get when I console.log($f7router.currentRoute); in the link onClick.

Screen Shot 2022-11-17 at 12.38.51 PM
Screen Shot 2022-11-17 at 12.38.51 PM1292×356 106 KB

However, If I open the /search/ popup, then close it and try to click on the same link, here’s what i get in console.log($f7router.currentRoute);

Screen Shot 2022-11-17 at 12.39.03 PM
Screen Shot 2022-11-17 at 12.39.03 PM1284×358 84.8 KB

Screen Shot 2022-11-17 at 12.39.11 PM
Screen Shot 2022-11-17 at 12.39.11 PM1292×88 36.8 KB

So, even thought the popup has been closed, it’s still the currentRoute, so any subsequent $f7.router.navigate attempts fail

How to I set this up so /search/ isn’t the currentRoute after I close the popup? Shouldn’t that be default behavior for a routable modal? Or is there some parameter I’m missing in the route setup.

Here’s the routes.js setup in this case for reference (CONFIGURATION 2 in my initial post)

{
    path: '/search/',
    popup: { component: SearchPopup },
    options: { history: false }, 
  },

By the way, if I remove history:false, the issue goes away, but then I’m back to the original issue described in CONFIGURATION 1 .

4

Please do that, you can fork that example CodeSandBox

5

@snowbeat Here you go: pensive-oskar-cmitix

Issue is reproducible 100% of the time.

  1. Open sandbox app
  2. Verify that main links on home page work
  3. Click on Search2 in header to open Search 2 popup (history: false)
  4. Close popup
  5. Click on any of the main links on home page. They no longer work.

Removing history: false from routes.js will correct the problem, but then we’ll be back to the problem described in CONFIGURATION 1

You can reproduce that original issue by

  1. Open sandbox app
  2. Click on Search1 in header to open Search 1 popup (history: true)
  3. Click on result link to go to Item X
  4. Once Item X opens, click on link to go to Item Y
  5. Click back to go to Item X
  6. Click back to get back to home (back link doesn’t work)
6

just change:

<div class="popup search-popup">
  <div class="view">

to;

<div class="popup search-popup">
  <div class="view view-init">

it will fix all your problems.

1 Like
7

@deejay And remove history:false from routes.js?

8

here => boring-murdock-9dlnn6

1 Like
9

@deejay That’s really helpful, thank you. I can use that structure to either open /search/ as a page or as a popup modal. Exactly what I was hoping to do. Thanks again.