Dropdown menu clipped inside of grid cell

[javier-godoy]

From thread in Vaadin Directory, Julien Nicoulaud wrote:

  I can't find a way to use this component inside a grid cell, the dropdown menu always gets clipped at the cell boundary even if I use a global CSS rule * {overflow: visible;}.

[javier-godoy]

Blocked by #5

[javier-godoy]

Vaadin 14.3.1 / chipfield 2.0.2-SNAPSHOT

        ChipField<String> chf = new ChipField<>("Select", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
        chf.setClosable(true);

        add(new Span("(Type UR for: Mercury, Saturn, Uranus)"));
        Grid<List<String>> grid = new Grid<>();
        grid.addColumn(list->list.isEmpty()?"Click me!":list.stream().collect(Collectors.joining(", "))).setEditorComponent(chf);

        grid.getEditor().setBinder(new Binder<>());
        grid.addItemClickListener(ev->grid.getEditor().editItem(ev.getItem()));
        grid.setItems(Arrays.asList(new ArrayList<>()));
        add(grid);

[paodb]

I've done some testing and it seems this issue happens because Grid's cell has a overflow:hidden style rule. A possible workaround will be to add a style to the column that will be containing the chip. This could be achieved by defining a new css file for grid and setting a new class to the column using setClassNameGenerator method. If we take the previous example, it could be something like this:

@CssImport(value = "./styles/vaadin-grid-cell-with-overflow.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {

    public MainView() {     
        ChipField<String> chf = new ChipField<>("Select", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
        chf.setClosable(true);

        add(new Span("(Type UR for: Mercury, Saturn, Uranus)"));
        Grid<List<String>> grid = new Grid<>();

        Column chipColumn = grid.addColumn(list -> list.isEmpty() ? "Click me!" : list.stream().collect(Collectors.joining(", "))).setEditorComponent(chf);
        chipColumn.setClassNameGenerator(c -> "overflow-visible-on-edit");

        grid.getEditor().setBinder(new Binder<>());
        grid.addItemClickListener(ev -> {
            grid.getEditor().editItem(ev.getItem());
        });
        grid.setItems(Arrays.asList(new ArrayList<>()));
        add(grid);
    }

}

and the syle file will need to contain something like:

:host [part~="cell"].overflow-visible-on-edit ::slotted(vaadin-grid-cell-content) {
    overflow: visible;
}

[javier-godoy]

That workaround would be even better if https://github.com/vaadin/web-components/issues/750 were implemented. (Otherwise, the cell overflows even when it's not in edition mode.)

I think this may be an issue with the client-side component, since it renders the dropdown inside of the shadow root. Other working components such as vaadin-combo-box don't have this issue, but they render the dropdown in an overlay.

I would keep this issue open for further consideration.