I know that some relevant questions exist but none of them really has an answer more than saying that it is not possible. What I would like to achieve is having a dropdown button inside of an anchor tag so that user can be redirected on click but also has a possibility to interact with the button itself since it is a multiple-choice dropdown. Right now, once the user clicks on the button, the anchor tag redirects the user without having any effect on the button.

Just to give you an idea of what the code looks like, here is the minimal reproduction:

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

I know that some relevant questions exist but none of them really has an answer more than saying that it is not possible. What I would like to achieve is having a dropdown button inside of an anchor tag so that user can be redirected on click but also has a possibility to interact with the button itself since it is a multiple-choice dropdown. Right now, once the user clicks on the button, the anchor tag redirects the user without having any effect on the button.

Just to give you an idea of what the code looks like, here is the minimal reproduction:

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

• javascript
• reactjs

• 1 HTML explicitly forbids nesting such interactive elements into each other. – C3roe Commented Feb 1, 2021 at 9:52
• What could be the solution to achieve the desired result then? – em_code Commented Feb 1, 2021 at 9:58

2 Answers 2

i think it's can help you

const myComp = () => {

handelBtn = (e) => {
    e.stopPropagation();
    // OR
    e.preventDefault();
}
return (
    <a href="some_location">
        <span>Some text</span>

        <div>
            <button onClick={handelBtn}>My Dropdown button</button>
        </div>
    </a>
)
}

I think this can help you.

It works with both <Link> Component and <a> tag. Here <a> tag will be wrapped around the div(card) and div will work as <a> tag when clicked. The button will be above the <a> tag and it is clickable.

const myComp = () => {

return (
    <div class="card">
      <a href="some_location"> </a>
      <span>Some text</span>

      <div>
        <button>My Dropdown button</button>
      </div>
    </div>
)

.card {
    position: relative;
 }
 .card > a {
   position: absolute;
   inset: 0;
 }
 .card  button {
   position: relative;
 }