Fix #5640 (#5703)

Fix #5556 Fix #5487 Fix #5457 Fix #5370 Fix #4051
primefaces · Jan 8, 2024 · abb41e6 · abb41e6
1 parent b6aee40
commit abb41e6
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 45 deletions.
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
@@ -130,6 +130,7 @@ export const ConfirmDialog = React.memo(
         }));
 
         const createFooter = () => {
+            const defaultFocus = getPropValue('defaultFocus');
             const acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
             const rejectClassName = classNames(
                 'p-confirm-dialog-reject',
@@ -141,6 +142,7 @@ export const ConfirmDialog = React.memo(
 
             const rejectButtonProps = {
                 label: rejectLabel,
+                autoFocus: defaultFocus === 'reject',
                 icon: getPropValue('rejectIcon'),
                 className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })),
                 onClick: reject,
@@ -154,6 +156,7 @@ export const ConfirmDialog = React.memo(
             const acceptButtonProps = mergeProps(
                 {
                     label: acceptLabel,
+                    autoFocus: defaultFocus === undefined || defaultFocus === 'accept',
                     icon: getPropValue('acceptIcon'),
                     className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
                     onClick: accept,
@@ -168,7 +171,7 @@ export const ConfirmDialog = React.memo(
             const content = (
                 <>
                     <Button {...rejectButtonProps} />
-                    <Button {...acceptButtonProps} autoFocus />
+                    <Button {...acceptButtonProps} />
                 </>
             );
 

diff --git a/components/lib/confirmdialog/ConfirmDialogBase.js b/components/lib/confirmdialog/ConfirmDialogBase.js
@@ -15,24 +15,25 @@ const classes = {
 export const ConfirmDialogBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ConfirmDialog',
-        tagKey: undefined,
-        visible: undefined,
-        message: null,
-        rejectLabel: null,
-        acceptLabel: null,
-        icon: null,
-        rejectIcon: null,
-        acceptIcon: null,
-        rejectClassName: null,
+        accept: null,
         acceptClassName: null,
-        className: null,
+        acceptIcon: null,
+        acceptLabel: null,
         appendTo: null,
-        footer: null,
         breakpoints: null,
+        children: undefined,
+        className: null,
+        defaultFocus: 'accept',
+        footer: null,
+        icon: null,
+        message: null,
         onHide: null,
-        accept: null,
         reject: null,
-        children: undefined
+        rejectClassName: null,
+        rejectIcon: null,
+        rejectLabel: null,
+        tagKey: undefined,
+        visible: undefined
     },
     css: {
         classes

diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
@@ -131,6 +131,11 @@ interface ConfirmDialogOptions {
      * @defaultValue No
      */
     rejectLabel: string;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus: string;
     /**
      * Default element created by the component.
      */
@@ -194,6 +199,11 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer
      * Style class of the accept button.
      */
     acceptClassName?: string | undefined;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus?: string | undefined;
     /**
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body

diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { Button } from '../button/Button';
 import { useHandleStyle } from '../componentbase/ComponentBase';
@@ -8,7 +9,6 @@ import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { ConfirmPopupBase } from './ConfirmPopupBase';
-import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 
 export const confirmPopup = (props = {}) => {
     props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
@@ -143,8 +143,14 @@ export const ConfirmPopup = React.memo(
         const onEntered = () => {
             bindOverlayListener();
 
-            if (acceptBtnRef.current) {
-                acceptBtnRef.current.focus();
+            const defaultFocus = getPropValue('defaultFocus');
+
+            if (defaultFocus === undefined || defaultFocus === 'accept') {
+                acceptBtnRef.current && acceptBtnRef.current.focus();
+            }
+
+            if (defaultFocus === 'reject') {
+                rejectBtnRef.current && rejectBtnRef.current.focus();
             }
 
             callbackFromProp('onShow');

diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js
@@ -74,29 +74,30 @@ const classes = {
 export const ConfirmPopupBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ConfirmPopup',
-        tagKey: undefined,
-        target: null,
-        visible: false,
-        message: null,
-        rejectLabel: null,
-        acceptLabel: null,
-        icon: null,
-        rejectIcon: null,
-        acceptIcon: null,
-        rejectClassName: null,
+        accept: null,
         acceptClassName: null,
-        className: null,
-        style: null,
+        acceptIcon: null,
+        acceptLabel: null,
         appendTo: null,
+        children: undefined,
+        className: null,
+        closeOnEscape: true,
+        defaultFocus: 'accept',
         dismissable: true,
         footer: null,
-        onShow: null,
+        icon: null,
+        message: null,
         onHide: null,
-        accept: null,
+        onShow: null,
         reject: null,
+        rejectClassName: null,
+        rejectIcon: null,
+        rejectLabel: null,
+        style: null,
+        tagKey: undefined,
+        target: null,
         transitionOptions: null,
-        children: undefined,
-        closeOnEscape: true
+        visible: false
     },
     css: {
         classes,

diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts
@@ -122,6 +122,11 @@ interface ConfirmPopupOptions {
      * @defaultValue No
      */
     rejectLabel: string;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus: string;
     /**
      * Default element created by the component.
      */
@@ -178,6 +183,11 @@ export interface ConfirmPopupProps {
      * @defaultValue false
      */
     visible?: boolean | undefined;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus?: string | undefined;
     /**
      * Message of the confirmation.
      */

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -66,10 +66,6 @@ export const BodyCell = React.memo((props) => {
         options: true
     });
 
-    if (props.editMode === 'row' && props.editing !== editingState) {
-        setEditingState(props.editing);
-    }
-
     const isEditable = () => {
         return getColumnProp('editor');
     };
@@ -512,6 +508,12 @@ export const BodyCell = React.memo((props) => {
         }
     });
 
+    React.useEffect(() => {
+        if (props.editMode === 'row' && props.editing !== editingState) {
+            setEditingState(props.editing);
+        }
+    }, [props.editMode, props.editing, editingState]);
+
     useUpdateEffect(() => {
         if (props.editMode === 'cell' || props.editMode === 'row') {
             setEditingRowDataState(getEditingRowData());
@@ -558,14 +560,14 @@ export const BodyCell = React.memo((props) => {
         const tabIndex = getTabIndex(cellSelected);
         const selectionMode = getColumnProp('selectionMode');
         const rowReorder = getColumnProp('rowReorder');
-        const rowEditor = getColumnProp('rowEditor');
         const header = getColumnProp('header');
         const body = getColumnProp('body');
         const editor = getColumnProp('editor');
         const frozen = getColumnProp('frozen');
         const align = getColumnProp('align');
         const value = resolveFieldData();
         const columnBodyOptions = { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
+        const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
         const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
         const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
         const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);

diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
@@ -18,17 +18,21 @@ export const TabMenu = React.memo(
         const navRef = React.useRef(null);
         const tabsRef = React.useRef({});
         const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
-
-        const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 id: idState,
                 activeIndex: activeIndexState
             }
+        };
+
+        const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+            ...metaData
         });
 
         const getPTOptions = (key, item, index) => {
             return ptm(key, {
+                parent: metaData,
                 context: {
                     item,
                     index

diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
@@ -332,8 +332,11 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const isSelected = () => {
-        if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
-        else return false;
+        if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys)) {
+            return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+        }
+
+        return false;
     };
 
     const isChecked = () => {

diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
@@ -66,10 +66,10 @@ export const TreeTableScrollableView = React.memo((props) => {
             frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
         }
 
-        scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+        scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
 
         if (scrollFooterBoxRef.current) {
-            scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+            scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
         }
 
         if (frozenScrollBody) {
@@ -78,6 +78,12 @@ export const TreeTableScrollableView = React.memo((props) => {
     };
 
     useMountEffect(() => {
+        let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+
+        el = el.length > 1 ? el[1] : el[0];
+
+        const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
+
         if (!props.frozen) {
             const scrollBarWidth = DomHandler.calculateScrollbarWidth();
 
@@ -87,7 +93,7 @@ export const TreeTableScrollableView = React.memo((props) => {
                 scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
             }
         } else {
-            scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+            scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
         }
     });