ekwonye-richard / react-flags-select

Customizable svg flags select components for React Js
197 stars 121 forks source link

The placeholder bleeds out/overflows on smaller width when selecting a long named country #179

Open jayspirits opened 1 year ago

jayspirits commented 1 year ago

I have implemented this dropdown with a limited width. but the placeholder bleeds out the text if you selected a country wider than the dropdown width. see the screenshots.

The dropdown options are good. it trims the country name "American Samoa" with ellipses at the end so it became "America..."

dropdown-options

But after selecting it, notice the text and the caret icon bleeds out/overflows the container.

with-selected

I did try to add a class on selectButtonClassname with overflow hidden and it did solve the text to overflow as it is being hidden, but the issue is it also hides the caret icon.

with-overflow-hidden