In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box.
I have experimented with various methods such as:
<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
<select:Option ui:field="option1" text="option1Text"/>
</select:Select>
Additionally, I have tried accessing it via the API:
fieldName.setShowMenuArrow(false);
The purpose behind this is to indicate that the selector is disabled and options are not available for selection within the dropdown.
Upon inspecting the element through the browser, I noticed nested divs/spans within the main select box div, including one specifically with the class
<span class="caret"></span>
.
Removing this class allowed me to hide the menu arrow. However, identifying and targeting this specific span tag with the caret class using querySelector poses a challenge due to other similarly structured selectors on the page.
This issue with the menuArrow handling in the Selector seems like a bug. Are there any workarounds that can be suggested until it is resolved? Any help or suggestions would be appreciated. Thank you!