[fix] Overlapping column names in drop down menu (#2239)

keplergl · Jun 9, 2023 · fa3bb9c · fa3bb9c
1 parent 796a9d2
commit fa3bb9c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/src/common/item-selector/dropdown-list.tsx b/src/components/src/common/item-selector/dropdown-list.tsx
@@ -28,7 +28,8 @@ export const classList = {
   listHeader: 'list__header',
   listSection: 'list__section',
   listItem: 'list__item',
-  listItemAnchor: 'list__item__anchor'
+  listItemAnchor: 'list__item__anchor',
+  listItemFixed: 'list__item__fixed'
 };
 
 const defaultDisplay = d => d;
@@ -214,7 +215,7 @@ export default class DropdownList extends Component<DropdownListProps, DropdownL
               <div
                 className={classNames(classList.listItem, {
                   hover: this.props.selectionIndex === i,
-                  fixed: true
+                  [classList.listItemFixed]: true
                 })}
                 key={`${display(value)}_${i}`}
                 onMouseDown={e => this._onClick(value, e)}

diff --git a/src/components/src/index.ts b/src/components/src/index.ts
@@ -206,7 +206,7 @@ export {default as DatasetLabel} from './common/dataset-label';
 export {default as ChickletedInput, ChickletButton} from './common/item-selector/chickleted-input';
 export {default as ItemSelector} from './common/item-selector/item-selector';
 export {default as Typeahead} from './common/item-selector/typeahead';
-export {default as DropdownList, ListItem} from './common/item-selector/dropdown-list';
+export {default as DropdownList, ListItem, classList as dropdownListClassList} from './common/item-selector/dropdown-list';
 export {default as FieldSelectorFactory} from './common/field-selector';
 export {default as Modal, ModalFooter, ModalTitle} from './common/modal';
 export {default as AppLogo} from './common/logo';

diff --git a/test/browser/components/side-panel/layer-configurator-test.js b/test/browser/components/side-panel/layer-configurator-test.js
@@ -30,7 +30,8 @@ import {
   LayerConfigGroupFactory,
   FieldSelectorFactory,
   ColumnSelectorFactory,
-  appInjector
+  appInjector,
+  dropdownListClassList
 } from '@kepler.gl/components';
 
 import {StateWFiles, StateWTripGeojson, testCsvDataId} from 'test/helpers/mock-state';
@@ -192,7 +193,11 @@ test('Components -> LayerConfigurator.mount -> defaut prop 2', t => {
     .find(FieldSelector)
     .at(0);
 
-  t.equal(fieldSelector2.find('.list__item.fixed').length, 1, 'should render 1 fixed item');
+  t.equal(
+    fieldSelector2.find(`.list__item.${dropdownListClassList.listItemFixed}`).length,
+    1,
+    'should render 1 fixed item'
+  );
 
   t.equal(
     getItemSelectorListText(fieldSelector2, 0),