1

We have a requirement on our tool wherein when a task is fetched, google search/amazon search pages should auto pop up as new tabs on same window. When the next task is fetched, the previous tasks tabs should close and the new task tabs should pop up. This is the implementation we have tried:

const [prevWindows, setPrevWindows] = useState([]);

const openWindows = (urls) => {
            // Close all previously opened tabs of previous task
            while (prevWindows.length > 0) {
              prevWindows.pop().close();
            }
        
            // Open new tabs for each URL in the array and add them to the prevWindows array
            const newTabs = urls.map((url) => window.open(url, '_blank'));
            setPrevWindows(newTabs);

...
...
openWindows(autoPopUpTabUrlArray);
};

An array is sent from backend API to frontend which contains a list of urls to autopopup. An example array would be:

"autoPopUpTabUrlArray": ["https://www.google.it/search?q=cover iphone 11 mini con sora i disegni", "https://www.amazon.it/s?k=cover iphone 11 mini con sora i disegni", "https://www.amazon.it/dp/B0BTD7BNR5"]

The behaviour seen currently with above approach:

  1. When first task is fetched, 3 new tabs pop up as expected.
  2. When second task is fetched, the two amazon tabs of first task are getting closed but not the google tab of first task. Following this, three new tabs of second task are popped up.

As we can see the google tab is not getting closed and remains open. Same behaviour continues and the google tabs are left open. Is there any reason why the google tab is not being closed or any alternate approach to achieve this?

Thanks.

Requirement: Google tabs should also close like the amazon/other url tabs. Tried checking online but did not find anything. Any help/insights would be appreciated.

Veronica
  • 31
  • 6
  • Do you get any error in the console? – deekeh Mar 26 '23 at 12:13
  • One more thing I found; you are popping from the array `prevWindows` which is a state. It is recommended to make alterations to state variables using the setVariableName (`setPrevWindows` in your code) function of the `useState()` functionality of React. – deekeh Mar 26 '23 at 12:21
  • hi @deekeh no error in console but I see that the window.opener is null for the google tab ref in next task – Veronica Mar 26 '23 at 12:38
  • 2 observations: 1. for the same task if I try to close and print(console.log) : the google tab also closes. Example: Under `const newTabs = urls.map((url) => window.open(url, '_blank')); ` If I add line: `newTabs((win)=>{ console.log("Window opener:", win.opener); win.close(); })` - all tabs close with google and window.opener is not null here for google tab – Veronica Mar 26 '23 at 12:40
  • `window.open()` as I checked on a blank firefox tab, returns an object. – deekeh Mar 26 '23 at 12:41
  • However, if I try to print prevWindows before closing, I can see the window.opener is null for google tab. Any chance that assigning this to state or component re-render is making google tab opener as null? – Veronica Mar 26 '23 at 12:42
  • yes it returns an object – Veronica Mar 26 '23 at 12:42
  • `window.open(null, '_blank');` throws an error, so that might be somewhere you want to debug. – deekeh Mar 26 '23 at 12:43
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/252785/discussion-between-deekeh-and-veronica). – deekeh Mar 26 '23 at 12:44
  • no there is no null passed to window.open. Always a url is passed. window.open is not causing the issue – Veronica Mar 26 '23 at 12:45

0 Answers0