I have a problem with that, I don't found the solution. How I can ctrl + click on a link for open in new tab ?
function handleClick(documentID) {
// if ctrl + click
window.open(`/document/${documentID}`, "_blank")
// else
// navigate("/document/" + documentID)
}
<ListItem onClick={() => handleClick(document.id)}>
i have comment the code for understand well
If you have a link, please use an actual a element with a href.
This is better for accessibility and you get the CTRL + click feature for free.
You need to pass event to function instead just ID. This way you can check for Ctrl:
function handleClick(event) {
const documentID = event.id;
if (event.ctrlKey) {
window.open(`/document/${documentID}`, "_blank")
} else {
navigate("/document/" + documentID)
}
}
<ListItem onClick={(event) => handleClick(event)}>
You can also extend your function for mouse wheel click:
function handleClick(event) {
event.preventDefault();
const documentID = event.id;
if (event.ctrlKey || e.button === 1) {
window.open(`/document/${documentID}`, "_blank")
} else if (e.type === 'click') {
navigate("/document/" + documentID)
}
}
<ListItem onClick={(event) => handleClick(event)} onMouseDown={(event) => handleClick(event)}>
Use anchor <a> (or react <Link> component) tag if you can, this is prefered way.