bootstrap 5 click inside dropdown should not open close the dropdown

I have the following code

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button <i class="bi bi-x inside-button"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
<script>
$('.inside-button').on('click', function(e) {
    console.log(new Date());
});
</script>
</body>
</html>

As you can see there is a bootstrap icon inside the button dropdown with a click event (by the class inside-button) the purpose of this functionality is to clear the content of the dropdown.

The problem is the dropdown still open and close when the icon is clicked, the click should only do the action without opening/closing the dropdown, how can I achieve this?

Note: I searched a lot inside stackoverflow before posting, this is for Bootstrap 5.

Solution

Thanks to Tom's answer I was able to figure out the exact behavior I want.

The dropdown constructor he used pointed me to the right direction on how to control the show and hide behavior of a bootstrap dropdown.

After I needed to figure out how you check if a dropdown is already opened, according to the Bootstrap JS file, it checks the presence of the class show. This also allow me to control the behavior when the dropdown is already opened.

This is the relevant code I wrote in the end:

// get the button toggle
let buttonToggle = $(this).closest('.dropdown-toggle');
// use the data property (bs-toggle) to get the class of the dropdown target element
let mainDropdown = $(this).closest('.' + buttonToggle.data('bs-toggle'));
// check if the toggle has the show class and use the dropdown method to hide or show the dropdown
if (buttonToggle.hasClass('show')) { mainDropdown.dropdown('hide'); } else { mainDropdown.dropdown('show'); }

Full code:

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button <i class="bi bi-x inside-button"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
<script>
$('.inside-button').on('click', function(e) {
    console.log(new Date());
    let buttonToggle = $(this).closest('.dropdown-toggle');
    let mainDropdown = $(this).closest('.' + buttonToggle.data('bs-toggle'));
    if (buttonToggle.hasClass('show')) { mainDropdown.dropdown('hide'); } else { mainDropdown.dropdown('show'); }
});
</script>
</body>
</html>