fix(BodyCell): prevent cell or row refocus when overlay clicked

Defect Fixes

fix: #7389

How To Resolve

Issue 1, Calendar Overlay Position Issue

Issue: When the cell is focused, the calendar overlay position behaves unexpectedly.
Cause: This occurs because the overlayRef of the Calendar is null when focused.

Solution: To resolve this, I added a setTimeout in the focus logic.

const focusOnElement = () => {
clearTimeout(focusTimeout.current);
focusTimeout.current = setTimeout(() => {  // Added!!
    if (editingState) {
        const focusableEl = props.editMode === 'cell' 
            ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') 
            : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');

        focusableEl && focusableEl.focus();
    }

    keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
}, 1);
};

Issue 2, Calendar Overlay Cannot Select the Day Label Issue

Issue: When editingMeta is updated, the cell gains focus. Consequently, selecting a date in the calendar overlay updates the editingMeta value, causing the cell to regain focus repeatedly. As a result, even after selecting a date, the selected value remains null.
Cause: The update to editingMeta triggers the cell to regain focus, which interferes with the date selection process in the calendar overlay.
Solution: To address this, focusOnElement() and updateStickyPosition() are only invoked when editMode, editing, or editingState are updated.

React.useEffect(() => {
    if (getColumnProp('frozen')) {
        updateStickyPosition();
    }
    if (props.editMode === 'cell' || props.editMode === 'row') {
        focusOnElement();
    }
}, [props.editMode, props.editing, editingState]); // Updated to include dependencies

Issue 3, Focus Remains When Clicking Outside of the Cell

Issue: When clicking outside of the cell (Calendar), the cell remains focused.
Cause: The focus does not properly shift when clicking outside the cell.

Solution: To fix this, the scope of setTimeout was expanded to include the conditional statement for switchCellToViewMode.

listener: (e) => {
setTimeout(() => { // Expanded setTimeout range
    if (!selfClick.current && isOutsideClicked(e.target)) {
        switchCellToViewMode(e, true);
    }
}, 0);

selfClick.current = false;
},

Test

sample code

```js import { Calendar } from '@/components/lib/calendar/Calendar'; import { DataTable } from '@/components/lib/datatable/DataTable'; import { Column } from '@/components/lib/column/Column'; import { useState, useCallback } from 'react'; export function BasicDoc() { return ( <> ); } const Test = () => { const [data, setData] = useState([ { id: 1, date: null }, { id: 2, date: '2024-01-01T00:00:00.000Z' }, { id: 3, date: '2024-02-02T00:00:00.000Z' } ]); const formatDate = (date) => { return date ? new Date(date).toLocaleDateString('es-ES') : ''; }; const dateEditor = useCallback( (options, col) => { const value = options.value; const isValidDate = value && !isNaN(Date.parse(value)); const dateValue = isValidDate ? new Date(value) : null; if (dateValue) { dateValue.setHours(12); } return ( { const selectedDate = e.value; if (selectedDate) selectedDate.setHours(12); const newData = [...data]; const index = options.rowIndex; newData[index] = { ...newData[index], date: selectedDate }; setData(newData); // console.log('newData', newData); // console.log(selectedDate); // console.log(options); options.editorCallback(selectedDate); // console.log(options); }} mask="99/99/9999" dateFormat="dd/mm/yy" showButtonBar showIcon /> ); }, [data] ); return (

TABLE

formatDate(rowData.date)} // Usar formatDate para mostrar la fecha editor={(options) => dateEditor(options, 'date')} dataType="date" />

); }; ```

Before

When clicking the cell, the calendar overlay's position behaves unexpectedly.
When selecting a date in the calendar overlay, the selected value remains null.

https://github.com/user-attachments/assets/ab53197a-24c8-4ad1-ac1c-32e40ea487e1

After

https://github.com/user-attachments/assets/0323d7e8-42ef-46ef-b90a-9c8d6e593616

primefaces / primereact