I solved this issue, so you can close this ticket. Basically, if there are google analytics / google tag manager tags included on the page, this will not work. I tested on 3 different scenarios and can confirm that the gtags break this functionality. Removing google analytics make it start working again.

So now I need to find a way to just block google on the pages that have the dropdown multiselect.

Feel free to close the ticket.

I also just now tested adding a very basic verison of the same form, without using any PHP at all. And the multiselect still does not work. Once again, it does work if I remove the form tags. So this appears to be purely isolated to the multiselect form, but only when it is within form tags. Again, MDB does not have an example anywhere on the website that shows the multiselect within form tags, so we can't really test it against your example.

Using this snippet below, the code still does not work:

            <form action="/usersc/cabinetupdate.php" method="post">
            <!-- Select Ingredients to Add -->
            <select data-mdb-select-init multiple id="ingredient" name="ingName[]" data-mdb-visible-options="10" data-mdb-filter="true" data-mdb-validation="true">
                <option value='test' name='test'>Test</option>
                <option value='test' name='test'>Test</option>
                <option value='test' name='test'>Test</option>
                <option value='test' name='test'>Test</option>
                <option value='test' name='test'>Test</option>
            </select>
            <label class="form-label select-label">Add ingredients to your cabinet.</label>
            <button class="btn btn-primary mt-4" type="submit" name="submit">Add Items</button>
        </form>

Hello, thanks for your reply! No, I am not using any type of framework. It's just vanilla php as this was my first project I started.

This code is for a form that is within a card. The card has a card-header, card body, and card footer. The submit button was intentionally inside the card footer, and I have used that method on other pages with no issues, although not in a multiselect dropdown. Nonetheless, I altered the tags and removed the card footer, but it did not solve the issue (other than it doesn't look as nice now). The issue is still occurring.

Oddly enough, I copied that entire code block to a completely different page with no other content on it. The multiselect still did not work. It still closes after the first click. So it doesn't seem to be isolated to that page.

As mentioned before. If I copy the snippet from MDB and paste it onto the page with example Select options, it works fine. But if I add opening and closing form tags around the snippet, the dropdown then start exhibiting this issue. MDB does not have a single example on the site that shows the multiselect dropdown housed within a function form, so I can't even compare the setup.

Here is my updated code:

    <div class="justify-content-center mx-auto">
    <div class="card shadow p-3 mt-2 mb-3">
      <div class='card-header'><h4>Add Items to your Cabinet</h4></div>
      <div class="alert alert-info p-1 mt-1 rounded rounded-bottom shadow" role="alert">
        <small><i class="p-2 fa-solid fa-info-circle"></i>&nbsp;&nbsp;<b>If you can't find an exact ingredient, try being less specific. Instead of 'Captain Morgan', instead try 'Rum'. Don't forget ice!</b></small>
      </div>
      <div class="card-body">
        <!-- Initiate Ingredient Selection Form Here -->
        <form action="/usersc/cabinetupdate.php" method="post">
          <!-- Select Ingredients to Add -->
          <select data-mdb-select-init multiple id="ingredient" name="ingName[]" data-mdb-visible-options="10" data-mdb-filter="true" data-mdb-validation="true">
            <?php
            // Iterating through the ingredient array I created above, each ouput as a select item in the dropdown box.
            foreach($uniqueArray as $ingredient){
                echo "<option value='$ingredient' name='ingName[]'>$ingredient</option>";
            } ?>
          </select>
          <label class="form-label select-label">Add ingredients to your cabinet.</label>
          <button class="btn btn-primary mt-4" type="submit" name="submit">Add Items</button>
        </form>
      </div>
    </div>
</div>

I checked it and I can't reproduce this issue. Can you reproduce this in our snippet?

I noticed that closing the form tag is in the wrong place. There is a card footer inside. Closing the div tag for the card body is also in the wrong place. If you analyze the code it now looks like this:

<div>
  <form>
</div>
<div>
  </form>
</div>

This seems to be an issue that occurs in the environment you are working in. First of all, I suggest improving the closing of tags, perhaps this fixes select behavior. Can you tell us more about this project? Is this a project based on WordPress, Laravel, Symfony or another framework?

    <div class="justify-content-center mx-auto">
    <div class="card shadow p-3 mt-2 mb-3">
      <div class='card-header'><h4>Add Items to your Cabinet</h4></div>
      <div class="alert alert-info p-1 mt-1 rounded rounded-bottom shadow" role="alert">
        <small><i class="p-2 fa-solid fa-info-circle"></i>  <b>If you can't find an exact ingredient, try being less specific. Instead of 'Captain Morgan', instead try 'Rum'. Don't forget ice!</b></small>
      </div>
      <div class="card-body">
        <!-- Initiate Ingredient Selection Form Here -->
        <form action="/usersc/cabinetupdate.php" method="post">
          <!-- Select Ingredients to Add -->
          <select data-mdb-select-init multiple id="ingredient" name="ingName[]" data-mdb-visible-options="10" data-mdb-filter="true" data-mdb-validation="true">
            <?php
            // Iterating through the ingredient array I created above, each ouput as a select item in the dropdown box.
            foreach($uniqueArray as $ingredient){
                echo "<option value='$ingredient' name='ingName[]'>$ingredient</option>";
            } ?>
          </select>
          <label class="form-label select-label">Add ingredients to your cabinet.</label>
          <button class="btn btn-primary mt-4" type="submit" name="submit">Add Items</button>
        </form>
      </div>
    </div>
</div>