fix: hide grid selection column using JavaScript

Hiding grid selection column with CSS breaks keyboard navigation Close #156
FlowingCode · Jan 24, 2024 · 8b3326e · 8b3326e
1 parent 874cd8e
commit 8b3326e
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 25 deletions.
diff --git a/src/main/java/com/flowingcode/vaadin/addons/twincolgrid/TwinColGrid.java b/src/main/java/com/flowingcode/vaadin/addons/twincolgrid/TwinColGrid.java
@@ -75,7 +75,6 @@
 
 @SuppressWarnings("serial")
 @JsModule(value = "./src/fc-twin-col-grid-auto-resize.js")
-@CssImport(value = "./styles/multiselect-cb-hide.css", themeFor = "vaadin-grid")
 @CssImport(value = "./styles/twin-col-grid-button.css")
 @CssImport(value = "./styles/twincol-grid.css")
 public class TwinColGrid<T> extends VerticalLayout
@@ -866,7 +865,8 @@ public FilterableTwinColumn<T> addFilterableColumn(ItemLabelGenerator<T> itemLab
   public TwinColGrid<T> selectRowOnClick() {
     forEachGrid(
         grid -> {
-          grid.addClassName("hide-selector-col");
+          grid.getElement().executeJs(
+              "if (this.querySelector('vaadin-grid-flow-selection-column')) { this.querySelector('vaadin-grid-flow-selection-column').hidden = true }");
 
           grid.addItemClickListener(
               c -> {

diff --git a/src/main/resources/META-INF/resources/frontend/styles/multiselect-cb-hide.css b/src/main/resources/META-INF/resources/frontend/styles/multiselect-cb-hide.css