TaxonomyPicker + Select Term Panel does not support RTL mode

[VladNS90]

Category

[ X ] Bug

Version

2.9.0

Expected

When using Arabic Site and TaxonomyPicker RTL mode for Suggestions and Select Term panel should work.

Steps to Reproduce

Just use Taxonomy picker on Arabic site
Screenshot of Select term in Arabic site (broken tree - wrong paddings and margins + Save cancel buttons should have margin between):

Screenshot of suggestions in Arabic site (should be at right side):

I suppose TaxonomyPicker.module.scss should have additional lines. I tried next to fix this (probably need more):

1. 'termSuggestion'
   html[dir='rtl'] .termSuggestion { text-align: right; }
2. 'termset'
   html[dir='rtl'] .termset { margin-left: 0; margin-right: 15px; }
3. 'listItem'
   html[dir='rtl'] .listItem img { margin-right: 0px; margin-left: 5px; }
   4)'termEnabled', 'termDisabled', 'termNoTagging '
   html[dir='rtl'] .termEnabled, html[dir='rtl'] .termDisabled, html[dir='rtl'] .termNoTagging{ background-position: calc(100% - 30px); }
4. 'term label>span'
   html[dir='rtl'] .term label>span { padding-left: 0; padding-right: 25px; }

Also Term.js script file contains next lines:

var styleProps = {
            marginLeft: (this.props.term.PathDepth * 30) + "px"
        }

This should be changed to check if RTL used and set marginRight instead.

And one more point - Cancel and Save buttons - it should have margin between

Thanks!
Vladyslav

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patrikhellgren]

@VladNS90 You should probably look into upgrading to v3 of the controls since v2 soon will be deprecated. In v3 you will soon find the ModernTaxonomyPicker (should be available in the beta version already) and I just made a PR with some small changes that should make it work with RTL mode (#1041). The ModernTaxonomyPicker is not yet a full feature replacement for TaxonomyPicker but if you dont use any of the special features and just want a regular taxonomy picker you should be fine. Read more about the features here: #1014

[VladNS90]

@patrikhellgren Thank you for the advice. It looks better then current Taxonomy pecker. And somewhen I need to plan migration to v3.

But for now I cannot update to v3 because of complexity of my Solution and If it possible to extend Taxonomy picker for v2 (at least Term.js file) it will be enough for now
Css part I could handle on my own.

Thanks!
Vladyslav

[AJIXuMuK]

@VladNS90 - unfortunately v2 is deprecated. We do not maintain it anymore.
I totally understand the issue you're experiencing, but the only way to fix it from library standpoint is to upgrade to v3 and use Modern Taxonomy Picker.