fix: autofocus reject SR dialog input focus to "Yes" button (#2083)

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -443,9 +443,19 @@ function _mapDisplaySets(
               ),
               actions: [
                 { id: 'cancel', text: 'Cancel', type: 'secondary' },
-                { id: 'yes', text: 'Yes', type: 'primary' },
+                {
+                  id: 'yes',
+                  text: 'Yes',
+                  type: 'primary',
+                  classes: ['reject-yes-button'],
+                },
               ],
               onClose: () => UIDialogService.dismiss({ id: 'ds-reject-sr' }),
+              onShow: () => {
+                const yesButton = document.querySelector('.reject-yes-button');
+
+                yesButton.focus();
+              },
               onSubmit: async ({ action }) => {
                 switch (action.id) {
                   case 'yes':

platform/ui/src/components/Dialog/Dialog.jsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import Footer from './Footer';
 import Body from './Body';
 import Header from './Header';
+import { useEffect } from 'react';
 
 const Dialog = ({
   title,
@@ -12,11 +13,12 @@ const Dialog = ({
   onClose,
   noCloseButton,
   actions,
+  onShow,
   onSubmit,
   header: HeaderComponent,
   body: BodyComponent,
   footer: FooterComponent,
-  value: defaultValue
+  value: defaultValue,
 }) => {
   const [value, setValue] = useState(defaultValue);
 
@@ -27,10 +29,14 @@ const Dialog = ({
   const position = 'relative';
   const width = 'w-full';
 
+  useEffect(() => {
+    if (onShow) {
+      onShow();
+    }
+  }, [onShow]);
+
   return (
-    <div
-      className={classNames(theme, flex, border, outline, position, width)}
-    >
+    <div className={classNames(theme, flex, border, outline, position, width)}>
       <HeaderComponent
         title={title}
         noCloseButton={noCloseButton}
@@ -38,11 +44,7 @@ const Dialog = ({
         value={value}
         setValue={setValue}
       />
-      <BodyComponent
-        text={text}
-        value={value}
-        setValue={setValue}
-      />
+      <BodyComponent text={text} value={value} setValue={setValue} />
       <FooterComponent
         actions={actions}
         onSubmit={onSubmit}
@@ -77,7 +79,7 @@ Dialog.defaultProps = {
   header: Header,
   footer: Footer,
   body: Body,
-  value: {}
+  value: {},
 };
 
 export default Dialog;

platform/ui/src/components/Dialog/Footer.js

@@ -21,7 +21,7 @@ const Footer = ({ actions, className, onSubmit, value }) => {
         return (
           <Button
             key={index}
-            className={classNames({ 'ml-2': !isFirst })}
+            className={classNames({ 'ml-2': !isFirst }, action.classes)}
             color={isPrimary ? 'primary' : undefined}
             onClick={onClickHandler}
             style={{ transition: 'all .15s ease', height: 34 }}
@@ -34,7 +34,7 @@ const Footer = ({ actions, className, onSubmit, value }) => {
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 Footer.propTypes = {
   className: PropTypes.string,
@@ -45,13 +45,14 @@ Footer.propTypes = {
       text: PropTypes.string.isRequired,
       value: PropTypes.any,
       type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+      classes: PropTypes.arrayOf(PropTypes.string),
     })
   ).isRequired,
 };
 
 Footer.defaultProps = {
   onSubmit: noop,
-  actions: []
+  actions: [],
 };
 
 export default Footer;