Getting dropdown active text after selection

Hi, 

I have a dropdown menu with the following html. 

<div class="cmp-dropdown cmp-form-options__field cmp-form-options__field--checkbox" name="persona" id="form-options-abc">
<button id="persona-dropdown" class="cmp-dropdown__button show">lunch</button>

<div id="form-options-abc" class="dropdown-text">
<ul>
<li data-value="bft" class="">breakfast</li>
<li data-value="lunch" class="">lunch</li>
<li data-value="tea" class="active">tea</li>
<li data-value="dinner">dinner</li>
</ul>
</div>

I've used click to identify the interaction : .cmp-dropdown__button

and also tried using .dropdown-text ul li.active to test.

The issue is the text fires when i click on the dropdown but not on the selected text in the dropdown.

Can you please advise?

Thanks.