如何在gwt-bootstrap3的Select小部件中删除menuArrow？

Question

I have been trying to conditionally remove the menu arrow at the end of a Select box in my current project which uses gwt-bootstrap3.

I have tried the following options:

<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
    <select:Option ui:field="option1" text="option1Text"/>
</select:Select>

I have also tried via the api, using

fieldName.setShowMenuArrow(false);

I am mainly looking to disable this menu arrow when I would like to indicate that this selector is disabled and that options are not available for select dropdown.

On inspecting element via the browser:I noticed that within the div for the select box there are other divs/spans and one nested as a child of the main selector div specifically with the

<span class="caret"></span>

On removing this class name I could make the menuArrow disappear. However accessing the specific span tag with this caret class using a querySelector and then making sure this is the right one (from the entire page which has other such selectors too) seems a slight challenge and unwieldy. Here's a snippet from the inspectElement on chrome. inspecting the Select element and the span with caret

This seems like a bug in the menuArrow handling for the Selector and if it is indeed one, can anyone suggest a workaround until fixed?. Appreciate your suggestions/answers. Thanks!

Answer 1

The setShowMenuArrow method is for something else: it turns on/off this arrow:

If you want to hide caret on all disabled Select boxes you could try with css:

.bootstrap-select.disabled .caret {
    display: none;
}

If you want to hide it only some of them, first add new class name, for example no-caret-on-disabled and use this:

.bootstrap-select.disabled.no-caret-on-disabled .caret {
    display: none;
}