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 = ( <>