diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js
index 90bf6dfbd..d336d458c 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js
@@ -18,6 +18,7 @@ const DataStoreControl = React.forwardRef(
control: ControlComponent,
value: externalValue,
onChange,
+ onConfirm = null,
delay = 300,
...props
},
@@ -25,7 +26,9 @@ const DataStoreControl = React.forwardRef(
) => {
const [ internalValue, setInternalValue ] = useState( externalValue );
const onChangeRef = useRef( onChange );
+ const onConfirmRef = useRef( onConfirm );
onChangeRef.current = onChange;
+ onConfirmRef.current = onConfirm;
const debouncedUpdate = useRef(
debounce( ( value ) => {
@@ -36,7 +39,7 @@ const DataStoreControl = React.forwardRef(
useEffect( () => {
setInternalValue( externalValue );
debouncedUpdate?.cancel();
- }, [ externalValue ] );
+ }, [ debouncedUpdate, externalValue ] );
useEffect( () => {
return () => debouncedUpdate?.cancel();
@@ -50,12 +53,25 @@ const DataStoreControl = React.forwardRef(
[ debouncedUpdate ]
);
+ const handleKeyDown = useCallback(
+ ( event ) => {
+ if ( onConfirmRef.current && event.key === 'Enter' ) {
+ event.preventDefault();
+ debouncedUpdate.flush();
+ onConfirmRef.current();
+ return false;
+ }
+ },
+ [ debouncedUpdate ]
+ );
+
return (
);
}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js
index 6602c335b..2c65e21e8 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js
@@ -157,6 +157,7 @@ const ManualConnectionForm = () => {
label={ clientIdLabel }
value={ manualClientId }
onChange={ setManualClientId }
+ onConfirm={ handleManualConnect }
className={ classNames( {
'ppcp--has-error': ! clientValid,
} ) }
@@ -173,6 +174,7 @@ const ManualConnectionForm = () => {
label={ secretKeyLabel }
value={ manualClientSecret }
onChange={ setManualClientSecret }
+ onConfirm={ handleManualConnect }
type="password"
/>