Chrome mobile emulator: can't go to edit cell mode

[d9k]

Can't go to cell edit mode by touch events emulated by Chrome DevTools (Toggle Device Toolbar)

Double touch does nothing.
Cell can be edited with F2, but physical keyboard is unavailable on most mobile devices.

https://adazzle.github.io/react-data-grid/#/all-features

[holospice18]

My work around is to use Context Menu which can be triggered via "Tap Hold" on emulator and right click on Desktop

[d9k]

@holospice18, can you share the code?

[holospice18]

I used the example from https://adazzle.github.io/react-data-grid/#/context-menu
Source: https://github.com/adazzle/react-data-grid/blob/main/website/demos/ContextMenu.tsx

[d9k]

@holospice18, how do you switch cell to edit mode programmatically?

[holospice18]

First, I exposed 'SelectCell' prop on 'onCellContextMenu'

onCellContextMenu = {({ row, column, selectCell }, event) => {...}

-----

Then pass it as props

setContextMenu(
	contextMenu === null
	? {
		row: row,
		rowIdx:  rows.indexOf(row),
		column:  column,
		selectCell: selectCell,
		}
	: 
	// repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
	// Other native context menus might behave different.
	// With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
	
	null,
);

-----

Then on menuClick
'props' = contextMenu

const handleMenuEdit = async (props) => {
	let rowIdx = props.rowIdx;
	props.selectCell({ rowIdx, idx: props.column.idx });        
};

-----

The 'onCellContextMenu' will look something like this:

<Grid
...
onCellContextMenu = {({ row, column, selectCell }, event) => 
	{
		
	event.preventGridDefault();
	// Do not show the default context menu
	event.preventDefault();

	setContextMenu(
		contextMenu === null
		? {
			row: row,
			rowIdx:  rowIdx,
			column:  column,
			selectCell: selectCell,
			}
		: 
		// repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
		// Other native context menus might behave different.
		// With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
		
		null,
	);
		
		
	}
}
/>