Framework: Turn off Grid's cell focus feature

[vaadin-bot]

Originally by _phansson_

---

For some grids, in particular read-only grids or grids that doesn't allow selection (SelectionMode.NONE), the cell focus feature is misleading for users. There should be a possibility to turn off the cell focus feature.

By cell focus I mean the CSS classname v-grid-cell-focused. Because of the way this is implemented in the CSS there isn't a good way to revert what v-grid-cell-focused does from CSS itself. Therefore a server-side feature is needed where cell focus can be turned off, similar to turning off selection feature on the grid.

---

Imported from https://dev.vaadin.com/ issue #19842

[vaadin-bot]

Originally by _phansson_

---

JohannesL came up with a temporary workaround in this thread. The following CSS works for me on Valo theme as it will turn off Grid's cell focus feature completely:

  .v-grid-cell-focused:before {
        display: none !important;
    }

Still believe the RFE is warranted.

[vaadin-bot]

Originally by @Artur-

---

Disabling the focus styling would at the same time break the keyboard navigation functionality as you have no idea of there in the grid you are or why pressing "up" 5 times does nothing but the sixth press scrolls a bit up (as it happens to reach the top of the grid at that time).

[vaadin-bot]

Originally by _phansson_

---

Why would you need keyboard navigation feature if you have a Grid with disabled editor and SelectionMode.NONE ?

[BrianSiimAndersenEG]

Any news on this? I'm in a situation where I too need to disable the focus - other than just disabling the styling. As Arthur points out, disabling the styling just breaks keyboard navigation. I'm using the latest version of Vaadin - 8.3.1.

[cdir]

+1
Why should I need the keyboard navigation without table editor. I have a table with some read-only columns and some components like check boxes in the first column. Even when I select the checkbox cell I cannot trigger the checkbox. After Tabbing several times I get focus on checkbox instead of cell.

[TatuLund]

One very harsh way to accomplish this is to set style generator which disables pointer events. May not be what you want generally, but could fit in some applications.

In your code

grid.setStyleGenerator(item -> { return "disable-events";});

And your theme

 .disable-events {
    pointer-events: none;
}

[wongsc]

hi, i have some other problem with the cell focus. My Grid has a horizontal scroll bar, and whenever i click on a cell, the horizontal scrollbar automatically scrolls to the focusing cell. this is very annoying. Is there anyway i can workaround this problem? something like scrolling all the way back to the start is better than scrolling to the middle of no where.

[sirbris]

@wongsc did you figure out something to prevent the automatic scrolling?

[padisah]

.disable-events {
pointer-events: none;
}
also disables the itemClickListeners

I tried to add vertical-align:middle to a column, the content is a single icon, and the column height is 4-5 rows due to other content.

v-grid-cell-focused screws up the position value, which disables the vertical-align, and shifts the icon to the top of column

This is a read only table, it's role is to show information about order items, and get clicked to open a popup with details & editing. So, grid-editing not needed, selecting not needed, focusing not needed - neither row or cell level - this one especially bad here, both by focus border and other changes.

I wonder why there is no possibility to disable focusing, or another simpler grid like component.

[padisah]

Finally I found a workaround:
grid.setPrimaryStyleName("nofocusgrid");

This disables the original valo theme rules, Vaadin will replace all the classNames with v-grid to nofocusgrid.

Then I copied all the css rules present in valo theme rules, that contain v-grid into a separate nofocus.scss file. And skipping the nasty rules ending with "focused".

This works, but rather inefficient, and I won't get version updates for the copied css part. Also my own related rules need to be copied, and maintained twice.