diff --git a/docs/en_US/release_notes_6_5.rst b/docs/en_US/release_notes_6_5.rst index e36c8dc6f..f94680563 100644 --- a/docs/en_US/release_notes_6_5.rst +++ b/docs/en_US/release_notes_6_5.rst @@ -25,6 +25,7 @@ Bug fixes | `Issue #7086 `_ - Correct documentation for 'Add named restore point'. | `Issue #7100 `_ - Fixed an issue where the Browser tree gets disappears when scrolling sequences. | `Issue #7109 `_ - Make the size blank for all the directories in the file select dialog. +| `Issue #7110 `_ - Ensure that cursor should be focused on the first options of the Utility dialogs. | `Issue #7118 `_ - Ensure that JSON files should be downloaded properly from the storage manager. | `Issue #7123 `_ - Fixed an issue where restore generates incorrect options for the schema. | `Issue #7126 `_ - Fixed an issue where the F2 Function key removes browser panel contents. diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index fc7ddca19..bd2c2064f 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/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(()=>{ - 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]); diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx index 243fff561..c0ff2bb10 100644 --- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx +++ b/web/pgadmin/static/js/SchemaView/MappedControl.jsx @@ -67,12 +67,12 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i {...props} />; case 'toggle': return ; case 'color': return ; case 'file': - return ; + return ; case 'sql': return ; case 'note': diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index 40d61ee92..09604c00d 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/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 ( { - (options||[]).map((option)=>{ + (options||[]).map((option, i)=>{ const isSelected = option.value === value; const isDisabled = disabled || option.disabled || (readonly && !isSelected); return ( -  {option.label} @@ -546,7 +546,8 @@ export function InputToggle({cid, value, onChange, options, disabled, readonly, } ); -} +}); +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 ( - + ); } @@ -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({ - cid, onChange, options, readonly=false, value, controlProps={}, optionsLoaded, optionsReloadBasis, disabled, ...props}) { +export const InputSelect = forwardRef(({ + 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 ( - ); } else { return ( - + ); } -} +}); +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 ( - + ); } @@ -868,6 +869,7 @@ FormInputSelect.propTypes = { className: CustomPropTypes.className, helpMessage: PropTypes.string, testcid: PropTypes.string, + inputRef: CustomPropTypes.ref }; /* React wrapper on color pickr */