Firefox translation feature breaks dropdown lists
Categories
(Firefox :: Translations, defect)
Tracking
()
People
(Reporter: monteiro, Unassigned)
References
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0
Steps to reproduce:
Enable translation on a webpage that has a dropdown list.
Actual results:
Clicking on the dropdown list doesn't do anything.
Expected results:
The dropdown list should work as expected.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Firefox::Translation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
Could you share the URL to the page? This is not reproducible in general, there must be something wrong with a specific page (or some specific pages).
I've seen this on two different sites but I only remember this one: https://www.notebooksbilliger.de
You need to activate always translate German after opening the site, after that add any item to the cart and go to the shopping basket, then click "To the ticket office" and put any email on "Order as guest" after that click continue and then there is the dropdown list named "country" that doesn't work.
|
||
Comment 4•1 year ago
|
||
It's some kind of custom widget. I can reproduce. Here is the markup in its broken state:
<div data-v-376638c8="" class="nbb-form-group__content">
<input data-v-cf32306a="" id="invoice_countryName" name="invoice_countryName" disabled="disabled" class="nbb-select__input">
<div data-v-cf32306a="" class="nbb-select__container nbb-select__option-selected">Germany
<i data-v-cf32306a="" class="nbb-select__dropdown-icon icon icon-arrow-right" style="transform: rotate(90deg);" data-moz-translations-id="0"></i>
</div>
<label data-v-cf32306a="" aria-label="Radiobutton für Land" class="nbb-select__label show-for-sr">Country</label> <span data-v-376638c8="" class="nbb-form-group__errors">
</span>
</div>
|
|
||
Comment 5•1 year ago
|
||
Here it is in its original state:
<div data-v-cf32306a="" class="nbb-select__container nbb-select__option-selected">
Deutschland
<i data-v-cf32306a="" class="nbb-select__dropdown-icon icon icon-arrow-right" style="transform: rotate(-90deg);"></i>
<ul data-v-cf32306a="" class="nbb-select__options" style="max-height: 500px;">
<li data-v-cf32306a="" class="nbb-select__options-item">
Deutschland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Österreich
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Niederlande
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Spanien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Belgien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Bulgarien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Dänemark
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Estland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Finnland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Frankreich
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Griechenland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Irland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Italien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Kroatien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Lettland
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Litauen
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Luxemburg
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Malta
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Polen
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Portugal
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Rumänien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Schweden
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Slowakische Rep
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Slowenien
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Tschechische Rep
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Ungarn
</li>
<li data-v-cf32306a="" class="nbb-select__options-item">
Zypern
</li>
</ul>
</div>
|
|
||
Comment 6•1 year ago
|
||
I think this is a TranslationsDocument issue. For some reason the <ul> is not being appended when the custom select widget is clicked. Perhaps there is a retained reference to an old node that we discarded when doing the translation? It seems worth doing an audit of this behavior. It would be nice to find a select dropdown widget where this reproduces in an isolated environment.
The translations going to the translations engine all seem to be correct, I think it's just on how the nodes are being reconstructed after the translations come back.
|
||
Comment 7•1 year ago
•
|
||
Hello Greg, can I mark the issue as new since you were able to reproduce it? I was also able to reproduce it on my Win11 using FF build 119.0 following the steps from comment#3? Thank you.
I've found more issues on a different website: https://www.prad.de/test-kaufberatung/produktsuche/
Enable always translate german, then click Monitor search, the "Sorting:" dropdown list disappears, also "EXWAHLKRITERIEN" isn't translated, you can also try clicking on the checkboxes and test.
|
|
||
Comment 10•1 year ago
|
||
The severity field is not set for this bug.
:nordzilla, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Updated•1 year ago
|
|
|
||
Updated•1 year ago
|
Description
•