After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> tag nested inside, along with 2 external links (<a> tags) and a button. Regrettably, none of these elements are functioning as intended. Despite experimenting with adding position: relative to the buttons and anchor tags, the problem remains unresolved. The current workaround only allows for navigation to occur if using the middle mouse button to open the link in a new tab. I am seeking assistance with configuring it so that all clicks register properly.
Card Component
<Link href={`/${song.singer}/${song.title}`} passHref>
<div className={style.cardOutter}>
<div className={style.cardHeader} style={{ backgroundImage: `url(${sdDefault(song.thumbnail)})` }}></div>
<div className={style.cardBody}>
<p>{song.title}</p>
{song.fts !== '' ?
<div className={style.card_fts}>
<span>{song.fts}</span>
</div>
:
null
}
<div className={style.cardInfoCont}>
<small>[{song.lang}] {song.album} - {song.genre}</small>
</div>
</div>
<div className={style.cardButtons}>
<a href={`https://www.youtube.com/watch?v=${song.thumbnail}`} target='_blank' rel='noreferrer' title='Listen On YouTube'><YouTubSimpleIcon color='#ff0000' width={30} height={30} /></a>
<button disabled={!authContext.isAuth} title='Add To Favouarites'><HeartIcon color='#ff0000' width={30} height={30} /></button>
<a href={`https://open.spotify.com/${song.spotifyURL === undefined ? '' : song.spotifyURL}`} target='_blank' rel='noreferrer' title='Listen On Spotify'><SpotifySimpleIcon color='#1db954' width={30} height={30} /></a>
</div>
<div className={style.cardLyricsBtn}>
<Link href={`/${song.singer}`} passHref>
<button>
Check The Artist!
</button>
</Link>
</div>
</div>
</Link>
SCSS File
.cardOutter {
width: 250px;
height: fit-content;
border-radius: 5px;
margin: auto;
margin-top: 2rem;
background-color: $primaryBlack;
color: $lightWhite;
transition: transform 250ms linear;
-webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.7);
cursor: pointer;
.cardHeader {
@include mixins.d-flex(center, center, row);
width: 100%;
min-height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px 5px 0 0;
}
.cardBody {
width: 100%;
padding: .5rem 1rem;
p {
width: 100%;
text-align: center;
font-size: 1.1rem;
font-weight: 500;
}
.card_fts {
width: 100%;
text-align: center;
font-size: 1rem;
font-weight: 400;
}
.cardInfoCont {
@include mixins.d-flex(center, center, row);
width: 100%;
margin-top: .4rem;
}
}
.cardButtons {
@include mixins.d-flex(center, space-around, row);
margin: .5rem 0;
padding-bottom: 1rem;
button {
@include mixins.naturalButton();
@include mixins.d-flex(center, center, row);
background-color: transparent;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
z-index: 100;
}
a {
@include mixins.simpleAnchor();
@include mixins.d-flex(center, center, row);
background-color: transparent;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
z-index: 100;
}
}
.cardLyricsBtn {
@include mixins.d-flex(center, center, row);
border-radius: 0 0 5px 5px;
button {
@include mixins.naturalButton();
@include mixins.d-flex(center, center, row);
font-size: 1.2rem;
font-weight: 500;
width: 100%;
padding: .5rem 0;
border-radius: 0 0 5px 5px;
transition: background 200ms linear;
}
a {
@include mixins.simpleAnchor();
@include mixins.d-flex(center, center, row);
font-size: 1.2rem;
font-weight: 500;
width: 100%;
padding: .5rem 0;
border-radius: 0 0 5px 5px;
}
}
}