In our app, our mobile home page features a banner/slider that automatically cycles between three banners. The banners can have one of three actions associated (determined by admins), two of which are in-app actions, and the third of which is an external link.
The external link is currently being caught by Safari's pop-up blocker (on my phone I at least get an alert prompting me to allow or block, but many users are not even seeing that, so it looks like nothing is happening).
There's almost no way I can think of to retain the banner functionality and include a direct link action, since it will prevent the other two action types from working. What I'm looking for is some kind of workaround to either make Safari think this is a direct user action, or to bypass the popup blocker. Here's the condensed code I'm working with:
const { open, launchModal, closeModal } = useModal(false);
const [banner, setBanner] = useState({});
const handleBannerClick = async (e, clickedBanner) => {
e.stopPropagation();
if (!isEmpty(clickedBanner)) {
setBanner(clickedBanner);
}
};
const openWindow = url => {
window.open(url, '_blank').focus().then(result => {
setBanner({})
})
};
// Determine which action to take based on which action type specified on the clicked banner
useEffect(() => {
if (banner?.actionType === 'link' && banner?.link) {
// Open link in new tab
openWindow(banner.link);
} else if (banner?.actionType === 'addItem') {
// Other action type
} else if (banner?.actionType === 'showItems') {
// Other action type
}
}, [banner]);
const banners = activeBanners
.sort((a, b) => a.activeIndex - b.activeIndex)
.map(banner => (
<Banner
key={banner._id}
color={banner.color}
title={banner.title}
textBody={banner.textBody}
imageUrl={banner.imageUrl}
handleClick={e => handleBannerClick(e, banner)}
data-test="explore-banner"
/>
));
return (
<>
<Slider {...sliderSettings}>{banners}</Slider>
<ModalContainer
// related to other action types
/>
</>
);
};