Inline editing with KeyTable doesn't turn orange on double click

nhinze

I'm trying to implement the following example: https://editor.datatables.net/examples/extensions/keyTable.html

I'm able to inline edit by pressing the Enter key, and the border turns orange as desired, and the arrow keys are disabled. However, if I double click, I can edit the cell, but the border stays blue, and the arrow keys are not disabled.

My code is below:

import { Controller } from "@hotwired/stimulus"
import * as bootstrap from "bootstrap"
import jsZip from 'jszip';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import DataTable from 'datatables.net-bs5';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-responsive-bs5';
import DateTime from 'datatables.net-datetime';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-select-bs5';
import 'datatables.net-rowgroup-bs5';
import 'datatables.net-keytable-bs5';
import Editor from '@datatables.net/editor-bs5';

// Connects to data-controller="aircraft-flight-log"
export default class extends Controller {
    connect() {

        pdfMake.addVirtualFileSystem(pdfFonts);

        DataTable.Buttons.jszip(jsZip);
        DataTable.Buttons.pdfMake(pdfMake);

        DataTable.use(bootstrap);

        const editor = new DataTable.Editor({
            ajax: {
                url: this.element.dataset.updateFlightLogUrl + '/aircraft_flight_logs/{id}',
                method: 'PATCH',
                headers: {
                    'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                },
                upload: {
                    url: this.element.dataset.updateFlightLogUrl + '/upload_flight_log',
                    type: 'POST',
                    headers: {
                        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                    }
                }
            },
            fields: this.getEditorFields(),
            table: '#aircraft-flight-log',
            formOptions: {
                inline: {
                    drawType: 'none'
                }
            }
        });

        this.editor = editor

        const table = new DataTable('#aircraft-flight-log', {
            ajax: this.element.dataset.updateFlightLogUrl + '/aircraft_flight_logs',
            columns: this.getTableColumns(),
            paging: false,
            fixedHeader: true,
            fixedColumns: {
                start: 4
            },
            rowGroup: {
                dataSrc: 'local_departure_date'
            },
            scrollX: true,
            // scrollY: '50vh',
            // responsive: true
            keys: {
                columns: '.col-inline-edit',
                editor: editor
            },
            layout: {
                topStart: {
                    buttons: [
                        //{ extend: 'create', editor: editor },
                        // { extend: 'edit', editor: editor },
                        //{ extend: 'remove', editor: editor }
                        'excel',
                        {
                            extend: 'pdf',
                            orientation: 'landscape',
                            pageSize: 'A2'
                        }
                    ]
                }
            },
            select: false
        });

        // Activate an inline edit on click of a table cell
        table.on('click', 'tbody td:not(:first-child)', function (e) {

            const colIndex = table.cell(this).index().column;
            const hasInlineEditClass = table.column(colIndex).header().classList.contains('col-inline-edit');

            if (hasInlineEditClass) {
                editor.inline(this, {
                    onBlur: 'submit',
                    drawType: 'none'
                });
            }

        });

        table.on('click', '.edit-bubble', function (e) {
              editor.bubble(e.target.parentElement);
        });

    }

    getEditorFields() {

        const fields1 =
            [
                {
                    label: 'Engine Out (hrs)',
                    name: 'engine_out_hrs',
                    attr: {
                        autocomplete: 'off'
                    }
                },
                {
                    label: 'Engine In (hrs)',
                    name: 'engine_in_hrs',
                    attr: {
                        autocomplete: 'off'
                    }
                }
            ]

        let fields2 = []

        for (let i = 0; i < this.element.dataset.pilotsMax; i++) {
            fields2.push({
                label: 'Pilot ' + (i + 1),
                name: 'pilot_' + (i + 1)
            })
        }
        for (let i = 0; i < this.element.dataset.passengersMax; i++) {
            fields2.push({
                label: 'Passenger ' + (i + 1),
                name: 'passenger_' + (i + 1)
            })
        }

        const fields3 =
            [
                {
                    label: 'Trip Purpose:',
                    name: 'trip_purpose'
                },
                {
                    label: 'Log:',
                    name: 'log',
                    type: 'upload',
                    display: (fileId) =>
                        `<a href="${this.editor.file('files', fileId).web_path}" target="_blank">Open</a>`,
                    clearText: 'Clear',
                    noImageText: 'No log'
                }
            ]

        return fields1.concat(fields2, fields3);
    }

    getTableColumns() {

        const columns1 =
            [
                { data: 'local_departure_date', className: 'text-center' },
                { data: 'local_departure_time', className: 'text-center' },
                { data: 'origin_code', className: 'text-center' }
            ]

        let columns2 = []

        for (let i = 0; i < this.element.dataset.pilotsMax; i++) {
            columns2.push({
                data: 'pilot_' + (i + 1),
                className: 'no-wrap text-center'
            })
        }
        for (let i = 0; i < this.element.dataset.passengersMax; i++) {
            columns2.push({
                data: 'passenger_' + (i + 1),
                className: 'no-wrap text-center'
            })
        }

        self.editor = this.editor

        const columns3 =
            [
                { data: 'trip_purpose', className: 'no-wrap text-center' },
                { data: 'trip_cost_dollars', className: 'text-center' },
                {
                    data: 'log',
                    render: function (file_id) {
                        return file_id
                            ? `<a href="${self.editor.file('files', file_id).web_path}" target="_blank"><i class="fa-solid fa-file-pdf" title="View log" style="color: green;"></i></a><i class="fa-solid fa-file-pen edit-bubble" style="color: orange; margin-left: 0.5em;" title="Edit Log"></i>`
                            : null;
                    },
                    defaultContent: '<i class="fa-solid fa-file-circle-plus edit-bubble" title="Add log"></i>',
                    title: 'Log',
                    className: 'no-wrap text-center'
                }
            ]

        return columns1.concat(columns2, columns3);
    }

}

nhinze

PS: If I add editOnFocus: true I get the orange border on cell click. However, I would prefer that the cells are only editable on double click like the example.

allan

Are you able to link to a page showing the issue please? As you note, the example appears to work okay.

One thing that strikes me is:

        // Activate an inline edit on click of a table cell
        table.on('click', 'tbody td:not(:first-child)', function (e) {
 
            const colIndex = table.cell(this).index().column;
            const hasInlineEditClass = table.column(colIndex).header().classList.contains('col-inline-edit');
 
            if (hasInlineEditClass) {
                editor.inline(this, {
                    onBlur: 'submit',
                    drawType: 'none'
                });
            }
 
        });

Don't call inline() yourself if you are using KeyTable. Just let KeyTable to it. Removing that might resolve the issue.

Allan