react-data-grid icon indicating copy to clipboard operation
react-data-grid copied to clipboard

How to copy value from react data grid cell containing drop down

Open vikasacharya16 opened this issue 4 years ago • 1 comments

enter image description here

I'm trying copy the value inside a cell, by clicking on cell and then by pressing ctrl + c.

But, this is working fine for cell that contains plain text.

For cell having dropdown on pressing c it'll bring dropdown into edit mode. i.e instead of copying it is going to edit mode.

Similar to text copy I need to copy from cell having dropdown. How to achieve this?

html select was used for dropdown

 <div>
                <select
                    value={row[column.id]}
                    onChange={(event) =>
                        onRowChange(
                            { ...row, [column.id]: event.target.value },
                            true
                        )
                    }
                    autoFocus
                    className="bulk_task_dropdown"
                    name="bulk_task_dropdown">
                    <option value={null}>{null}</option>
                    {possible_values.map((item) => {
                        return (
                            <option key={item} value={item}>
                                {item}
                            </option>
                        )
                    })}
                </select>
            </div>

vikasacharya16 avatar Dec 09 '21 08:12 vikasacharya16

I know this is an old issue, but I also think it is annoying that ctrl+c puts the cell into edit mode since it breaks standard browser copy functionality and it is non-standard behavior that users wouldn't expect.

There is also another bug where copying text does not always select the cell, so when the value is copied the previously selected cell goes into edit mode even though the user was not doing anything related to that.

EDIT Example video: https://jam.dev/c/0b877df2-5218-4e97-8d86-e55948147e9a

EDIT 2 I was able to override this behavior as shown in one of the examples

onCellKeyDown={(args, event) => {
  event.preventGridDefault();
}}

paustint avatar Jul 09 '23 14:07 paustint

RDG added onCellCopy and onCellPaste props and this should happen anymore https://adazzle.github.io/react-data-grid/#/CommonFeatures

amanmahajan7 avatar Apr 15 '25 20:04 amanmahajan7