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 vaadin/web-components#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.