fix: fix search result in rtl mode

qlik-oss · Mar 23, 2023 · e4f1839 · e4f1839
1 parent e7b1cc7
commit e4f1839
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx
@@ -230,6 +230,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
               isGridCol={isGridCol}
               isSingleSelect={isSingleSelect}
               valueTextAlign={valueTextAlign}
+              direction={direction}
             />
           ) : (
             <Field

diff --git a/...nucleus/src/components/listbox/components/ListBoxRowColumn/components/FieldWithRanges.jsx b/...nucleus/src/components/listbox/components/ListBoxRowColumn/components/FieldWithRanges.jsx
@@ -2,10 +2,11 @@ import React from 'react';
 import CheckboxField from './CheckboxField';
 import ValueField from './ValueField';
 
-function LabelsWithRanges({ labels, dense, showGray, checkboxes }) {
+function LabelsWithRanges({ labels, dense, showGray, checkboxes, direction }) {
+  const orderedLabels = direction === 'rtl' ? [...labels].reverse() : labels;
   return (
     <>
-      {labels.map(([label, highlighted], index) => {
+      {orderedLabels.map(([label, highlighted], index) => {
         const key = `${index}`;
         return (
           <ValueField
@@ -35,8 +36,11 @@ function FieldWithRanges({
   isGridCol,
   isSingleSelect,
   valueTextAlign,
+  direction,
 }) {
-  const LWR = <LabelsWithRanges labels={labels} dense={dense} showGray={showGray} checkboxes={checkboxes} />;
+  const LWR = (
+    <LabelsWithRanges labels={labels} dense={dense} showGray={showGray} checkboxes={checkboxes} direction={direction} />
+  );
   return checkboxes ? (
     <CheckboxField
       onChange={onChange}