diff --git a/components/doc/confirmdialog/basicdoc.js b/components/doc/confirmdialog/basicdoc.js
index 8ec43dbee7..ed78ea587e 100644
--- a/components/doc/confirmdialog/basicdoc.js
+++ b/components/doc/confirmdialog/basicdoc.js
@@ -21,6 +21,7 @@ export function BasicDoc(props) {
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -32,6 +33,7 @@ export function BasicDoc(props) {
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
acceptClassName: 'p-button-danger',
+ defaultFocus: 'reject',
accept,
reject
});
@@ -66,6 +68,7 @@ export default function BasicDemo() {
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -76,6 +79,7 @@ export default function BasicDemo() {
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
+ defaultFocus: 'reject',
acceptClassName: 'p-button-danger',
accept,
reject
@@ -116,6 +120,7 @@ export default function BasicDemo() {
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -126,6 +131,7 @@ export default function BasicDemo() {
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
+ defaultFocus: 'reject',
acceptClassName: 'p-button-danger',
accept,
reject
diff --git a/components/doc/confirmpopup/basicdoc.js b/components/doc/confirmpopup/basicdoc.js
index 507abfb226..0c3408d592 100644
--- a/components/doc/confirmpopup/basicdoc.js
+++ b/components/doc/confirmpopup/basicdoc.js
@@ -21,6 +21,7 @@ export function BasicDoc(props) {
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -32,6 +33,7 @@ export function BasicDoc(props) {
message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle',
acceptClassName: 'p-button-danger',
+ defaultFocus: 'reject',
accept,
reject
});
@@ -68,6 +70,7 @@ export default function BasicDemo() {
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -78,6 +81,7 @@ export default function BasicDemo() {
target: event.currentTarget,
message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle',
+ defaultFocus: 'reject',
acceptClassName: 'p-button-danger',
accept,
reject
@@ -118,6 +122,7 @@ export default function BasicDemo() {
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
+ defaultFocus: 'accept',
accept,
reject
});
@@ -128,6 +133,7 @@ export default function BasicDemo() {
target: event.currentTarget,
message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle',
+ defaultFocus: 'reject',
acceptClassName: 'p-button-danger',
accept,
reject
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index 98db4a645a..b033c4db88 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -126,6 +126,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',
@@ -137,6 +138,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,
@@ -150,6 +152,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,
@@ -164,7 +167,7 @@ export const ConfirmDialog = React.memo(
const content = (
<>
-
+
>
);
diff --git a/components/lib/confirmdialog/ConfirmDialogBase.js b/components/lib/confirmdialog/ConfirmDialogBase.js
index 1a83c7466d..e98d730b76 100644
--- a/components/lib/confirmdialog/ConfirmDialogBase.js
+++ b/components/lib/confirmdialog/ConfirmDialogBase.js
@@ -15,23 +15,24 @@ 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,
+ className: null,
+ defaultFocus: 'accept',
+ footer: null,
+ icon: null,
+ message: null,
onHide: null,
- accept: null,
reject: null,
+ rejectClassName: null,
+ rejectIcon: null,
+ rejectLabel: null,
+ tagKey: undefined,
+ visible: undefined,
children: undefined
},
css: {
diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
index 7a59ba53c0..6bcc869966 100644
--- 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 {
props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
@@ -45,6 +45,7 @@ export const ConfirmPopup = React.memo(
const overlayRef = React.useRef(null);
const acceptBtnRef = React.useRef(null);
+ const rejectBtnRef = React.useRef(null);
const isPanelClicked = React.useRef(false);
const overlayEventListener = React.useRef(null);
const confirmProps = React.useRef(null);
@@ -137,8 +138,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');
@@ -280,6 +287,7 @@ export const ConfirmPopup = React.memo(
);
const rejectButtonProps = mergeProps({
+ ref: rejectBtnRef,
label: rejectLabel,
icon: getPropValue('rejectIcon'),
className: cx('rejectButton', { getPropValue }),
diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js
index 3eb2e6cc1f..5fbcd4973a 100644
--- 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
index 37f16c8f39..01fbf21c04 100644
--- 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.
*/
@@ -155,6 +160,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.
*/