Steps to reproduce

• Use a survey with the Fruity theme.
• Add a question using a Bootstrap dropdown question type.
• Open the dropdown and select an option.
• Keep the cursor over the dropdown.
• Observe that the dropdown appears to contain an empty space instead of displaying the selected value.
• Move the cursor to another question.
• The selected value becomes visible again.

Expected result

The selected value should remain visible when the Bootstrap Select control is hovered, focused, or active.

Actual result

The selected value disappears visually while the dropdown is hovered.

The value remains present in the HTML, for example:

<button type="button"
class="btn dropdown-toggle border"
role="combobox"
title="3">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">3</div>
</div>
</div>
</button>

The selected option is also correctly marked:

<a role="option"
class="dropdown-item selected active"
aria-selected="true">
<span class="text">3</span>
</a>

Cause

The Fruity theme contains the generic rule: (theme.css)

.btn:focus, .btn:hover {
color: #fff;
}

Bootstrap Select uses a .btn.dropdown-toggle for the dropdown control. Consequently, the generic Fruity .btn:hover rule also applies to the Bootstrap Select control and changes its text color when hovered.

This causes the selected value to become visually hidden against the dropdown background.

Suggested fix

The generic Fruity .btn:hover / .btn:focus styling should not override the text color of Bootstrap Select dropdown controls.

A scoped rule for .bootstrap-select > .dropdown-toggle, or an adjustment to the generic .btn styling, should prevent the selected value from becoming invisible.