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" />