Datatable dropdowns copy and paste

Dash Python
1

I have a Datatable with some of the cells as dropdowns.

My users would like to paste data into the cells/table however dropdown cells that are dropdowns are not selected as the active cell when pressed (instead give dropdown options) and so the user needs to navigate to dropdown cells via the keyboard in order to paste (or copy).

Is there a ‘cleaner’ more user friendly way of handling this?

Many thanks :blush:

2

Hello @Redhotmoons,

Welcome to the community. :slight_smile:

Are you wanting the selection options to populate upon navigation over the dropdown elements? (arrow over creates the dropdown)

3

Ok, I read this more closely, and you are looking to copy the value of a cell without having to activate.

issue - Clicking activates the cell dropdown but does not “focus” the cell.

fix - Add an event listener that also focuses the cell when the selection is picked. Benefits of this, cell navigation between cells becomes responsive to left right arrow keys.

new issue - Using arrow keys no longer selects the active selection, but acts as the changes arent submitted.

fix - Add listener that mimics a selection choice on the “focused” selection item.

–Original goal copy contents of cell. –

issue - Can only copy if a selection was already taken, new selections would need to be navigated away from and back to.

fix - Add listener for ctrl+c to take the highlighted selection and take the aria-label into the navigator clipboard.

additinal glitches - Acts as if a selection was made, even if no desired dropdown is taken. Possible fixes, navigation and clicks of the datatable activate the first layer (navigation and active cell), then additional typing could activate editing or create dropdown menu.

Here are the listeners that I added:


arrowKeys = ['ArrowLeft', 'ArrowRight']

document.addEventListener('keyup', function () {
    if (arrowKeys.includes(event.key)) {
        try {
        $("td.focused .Select-control")[0].dispatchEvent(new MouseEvent("mousedown", {
            view: window,
            bubbles: true,
            cancelable: true
            }))
        } catch {}
    }
})

document.addEventListener('keydown', function () {
    if (arrowKeys.includes(event.key)) {
        try{
        $("td.focused .Select-menu-outer .Select-option.is-focused")[0].dispatchEvent(new MouseEvent("mousedown", {
            view: window,
            bubbles: true,
            cancelable: true
            }))
        } catch {}
    }
    else if (event.ctrlKey && event.key == 'c') {
        navigator.clipboard.writeText($("td.focused .Select-menu-outer .Select-option.is-focused").attr('aria-label'))
    }
})

selectClasses = ['Select-value-label', "Select-control", "Select-placeholder", 'Select-value']

document.addEventListener('mousedown',
    function () {
        if (selectClasses.includes($(event.target).attr('class'))) {
            $(event.target).closest('td').click()
        }
    }
)

There are a couple of other changes that could make this flow easier, let me know your feedback. @Redhotmoons

1 Like
4

Sweet, I’ve never come across EventListener!
I’ll have a play around with it :smile:

Thanks for the help!

5

Yup. They are fun.

For my code to work, you’ll have to add jquery to your project in the external scripts section of your app initialization.

1 Like