Ensure that cursor should be focused on the first options of the Utility dialogs. Fixes #7110

docs/en_US/release_notes_6_5.rst

@@ -25,6 +25,7 @@ Bug fixes
 | `Issue #7086 <https://redmine.postgresql.org/issues/7086>`_ -  Correct documentation for 'Add named restore point'.
 | `Issue #7100 <https://redmine.postgresql.org/issues/7100>`_ -  Fixed an issue where the Browser tree gets disappears when scrolling sequences.
 | `Issue #7109 <https://redmine.postgresql.org/issues/7109>`_ -  Make the size blank for all the directories in the file select dialog.
+| `Issue #7110 <https://redmine.postgresql.org/issues/7110>`_ -  Ensure that cursor should be focused on the first options of the Utility dialogs.
 | `Issue #7118 <https://redmine.postgresql.org/issues/7118>`_ -  Ensure that JSON files should be downloaded properly from the storage manager.
 | `Issue #7123 <https://redmine.postgresql.org/issues/7123>`_ -  Fixed an issue where restore generates incorrect options for the schema.
 | `Issue #7126 <https://redmine.postgresql.org/issues/7126>`_ -  Fixed an issue where the F2 Function key removes browser panel contents.

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -150,7 +150,7 @@ export default function FormView({
   let tabsClassname = {};
   const [tabValue, setTabValue] = useState(0);
   const classes = useStyles();
-  const firstElement = useRef();
+  const firstEleSet = useRef();
   const formRef = useRef();
   const onScreenTracker = useRef(false);
   const depListener = useContext(DepListenerContext);
@@ -201,6 +201,8 @@ export default function FormView({
   }, [stateUtils.formResetKey]);
 
   let fullTabs = [];
+  // To check if the first element ref is set.
+  firstEleSet.current = false;
 
   /* Prepare the array of components based on the types */
   schemaRef.current.fields.forEach((field)=>{
@@ -289,8 +291,9 @@ export default function FormView({
         tabs[group].push(
           useMemo(()=><MappedFormControl
             inputRef={(ele)=>{
-              if(firstEleRef && !firstEleRef.current) {
+              if(!firstEleSet.current && ele) {
                 firstEleRef.current = ele;
+                firstEleSet.current = true;
               }
             }}
             state={value}
@@ -343,10 +346,6 @@ export default function FormView({
     fullTabs.push(sqlTabName);
   }
 
-  useEffect(()=>{
-    firstElement.current && firstElement.current.focus();
-  }, []);
-
   useEffect(()=>{
     onTabChange && onTabChange(tabValue, Object.keys(tabs)[tabValue], sqlTabActive);
   }, [tabValue]);

web/pgadmin/static/js/SchemaView/MappedControl.jsx

@@ -67,12 +67,12 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i
       {...props} />;
   case 'toggle':
     return <FormInputToggle name={name} value={value}
-      onChange={onTextChange} className={className}
+      onChange={onTextChange} className={className} inputRef={inputRef}
       {...props} />;
   case 'color':
     return <FormInputColor name={name} value={value} onChange={onTextChange} className={className} {...props} />;
   case 'file':
-    return <FormInputFileSelect name={name} value={value} onChange={onTextChange} className={className} {...props} />;
+    return <FormInputFileSelect name={name} value={value} onChange={onTextChange} className={className} inputRef={inputRef} {...props} />;
   case 'sql':
     return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} noLabel={noLabel} {...props} />;
   case 'note':

web/pgadmin/static/js/components/FormComponents.jsx

@@ -523,7 +523,7 @@ FormInputCheckbox.propTypes = {
 };
 
 
-export function InputToggle({cid, value, onChange, options, disabled, readonly, ...props}) {
+export const InputToggle = forwardRef(({cid, value, onChange, options, disabled, readonly, ...props}, ref) => {
   return (
     <ToggleButtonGroup
       id={cid}
@@ -533,11 +533,11 @@ export function InputToggle({cid, value, onChange, options, disabled, readonly,
       {...props}
     >
       {
-        (options||[]).map((option)=>{
+        (options||[]).map((option, i)=>{
           const isSelected = option.value === value;
           const isDisabled = disabled || option.disabled || (readonly && !isSelected);
           return (
-            <ToggleButton key={option.label} value={option.value} component={isSelected ? PrimaryButton : DefaultButton}
+            <ToggleButton ref={i==0 ? ref : null} key={option.label} value={option.value} component={isSelected ? PrimaryButton : DefaultButton}
               disabled={isDisabled} aria-label={option.label}>
               <CheckRoundedIcon style={{visibility: isSelected ? 'visible': 'hidden'}}/>&nbsp;{option.label}
             </ToggleButton>
@@ -546,7 +546,8 @@ export function InputToggle({cid, value, onChange, options, disabled, readonly,
       }
     </ToggleButtonGroup>
   );
-}
+});
+InputToggle.displayName = 'InputToggle';
 InputToggle.propTypes = {
   cid: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
@@ -559,10 +560,9 @@ InputToggle.propTypes = {
 
 export function FormInputToggle({hasError, required, label,
   className, helpMessage, testcid, ...props}) {
-
   return (
     <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
-      <InputToggle {...props}/>
+      <InputToggle ref={props.inputRef} {...props}/>
     </FormInput>
   );
 }
@@ -573,6 +573,7 @@ FormInputToggle.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  inputRef: CustomPropTypes.ref
 };
 
 /* react-select package is used for select input
@@ -739,8 +740,8 @@ function getRealValue(options, value, creatable, formatter) {
   return realValue;
 }
 
-export function InputSelect({
+export const InputSelect = forwardRef(({
-  cid, onChange, options, readonly=false, value, controlProps={}, optionsLoaded, optionsReloadBasis, disabled, ...props}) {
+  cid, onChange, options, readonly=false, value, controlProps={}, optionsLoaded, optionsReloadBasis, disabled, ...props}, ref) => {
   const [[finalOptions, isLoading], setFinalOptions] = useState([[], true]);
   const theme = useTheme();
 
@@ -831,14 +832,15 @@ export function InputSelect({
   };
   if(!controlProps.creatable) {
     return (
-      <Select {...commonProps}/>
+      <Select ref={ref} {...commonProps}/>
     );
   } else {
     return (
-      <CreatableSelect {...commonProps}/>
+      <CreatableSelect ref={ref} {...commonProps}/>
     );
   }
-}
+});
+InputSelect.displayName = 'InputSelect';
 InputSelect.propTypes = {
   cid: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.bool]),
@@ -854,10 +856,9 @@ InputSelect.propTypes = {
 
 export function FormInputSelect({
   hasError, required, className, label, helpMessage, testcid, ...props}) {
-
   return (
     <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
-      <InputSelect {...props}/>
+      <InputSelect ref={props.inputRef} {...props}/>
     </FormInput>
   );
 }
@@ -868,6 +869,7 @@ FormInputSelect.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  inputRef: CustomPropTypes.ref
 };
 
 /* React wrapper on color pickr */