From 5a053025c31c429bbc604fd6a54eb4c40a530019 Mon Sep 17 00:00:00 2001
From: ido <ido.pluto@w-on.uk>
Date: Sat, 27 Apr 2024 17:59:12 +0300
Subject: [PATCH] feat(input): redirect onEnter to a button

---
 examples/simple-form/src/pages/on-enter.astro | 18 ++++++++++
 packages/forms/src/components/WebForms.astro  | 34 +++++++++++++------
 .../forms/src/components/form/BInput.astro    |  7 +++-
 3 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 examples/simple-form/src/pages/on-enter.astro

diff --git a/examples/simple-form/src/pages/on-enter.astro b/examples/simple-form/src/pages/on-enter.astro
new file mode 100644
index 0000000..360ac3f
--- /dev/null
+++ b/examples/simple-form/src/pages/on-enter.astro
@@ -0,0 +1,18 @@
+---
+import { BButton, BInput, Bind, BindForm } from '@astro-utils/forms/forms.js';
+import Layout from '../layouts/Layout.astro';
+
+const bind = Bind();
+
+function handleSubmit() {
+    console.log(bind);
+}
+---
+
+<Layout title='forms'>
+    <BindForm bind={bind}>
+        <BInput type='text' name='query' placeholder='Enter text' required onEnterClick='submit'/>
+        <BButton onClick={() => console.log('Do nothing')}>Do noting</BButton>
+        <BButton onClick={handleSubmit} whenFormOK id="submit">submit</BButton>
+    </BindForm>
+</Layout>
diff --git a/packages/forms/src/components/WebForms.astro b/packages/forms/src/components/WebForms.astro
index 4b296d5..3004351 100644
--- a/packages/forms/src/components/WebForms.astro
+++ b/packages/forms/src/components/WebForms.astro
@@ -1,13 +1,13 @@
 ---
-import {asyncContext} from '@astro-utils/context';
-import {createFormToken} from '../form-tools/csrf.js';
-import {getFormOptions} from '../settings.js';
+import { asyncContext } from '@astro-utils/context';
+import { createFormToken } from '../form-tools/csrf.js';
+import { getFormOptions } from '../settings.js';
 
 export interface Props extends astroHTML.JSX.FormHTMLAttributes {}
 
 const context = {
     ...Astro.props,
-    webFormsSettings: {haveFileUpload: false},
+    webFormsSettings: { haveFileUpload: false },
     tempValues: {},
     viewStates: {
         counter: 0,
@@ -15,9 +15,9 @@ const context = {
     },
 };
 
-const htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, {name: '@astro-utils/forms', context, lock: "webForms"});
+const htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'webForms' });
 
-const {webFormsSettings, tempValues, viewStates, ...props} = context;
+const { webFormsSettings, tempValues, viewStates, ...props } = context;
 if (webFormsSettings.haveFileUpload) {
     props.enctype = 'multipart/form-data';
 }
@@ -27,8 +27,22 @@ const formRequestToken = useSession && (await createFormToken(Astro));
 const clientScript = Astro.locals.forms.scriptToRun;
 ---
 
-<form method="post" {...props}>
-    {formRequestToken && <input type="hidden" name={formRequestToken.filed} value={formRequestToken.token}/>}
-    <Fragment set:html={htmlSolt}/>
-    {clientScript && <script set:html={clientScript}></script>}
+<form method='post' {...props}>
+    {formRequestToken && <input type='hidden' name={formRequestToken.filed} value={formRequestToken.token} />}
+    <Fragment set:html={htmlSolt} />
+    {clientScript && <script set:html={clientScript} />}
 </form>
+<script>
+    declare global {
+        interface Window {
+            __redirectEnter: (event: KeyboardEvent, id: string) => void;
+        }
+    }
+
+    window.__redirectEnter = function(event, id) {
+        if (event.code === 'Enter') {
+            event.preventDefault();
+            document.getElementById(id)?.click();
+        }
+    }
+</script>
diff --git a/packages/forms/src/components/form/BInput.astro b/packages/forms/src/components/form/BInput.astro
index 800f8c2..c12d5ed 100644
--- a/packages/forms/src/components/form/BInput.astro
+++ b/packages/forms/src/components/form/BInput.astro
@@ -14,6 +14,7 @@ interface ModifyInputProps {
     value?: string | string[] | number | Date | null | undefined | boolean;
     max?: number | string | undefined | null | Date;
     min?: number | string | undefined | null | Date;
+    onEnterClick?: string
 }
 
 export interface Props<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> extends Partial<ModifyDeep<astroHTML.JSX.InputHTMLAttributes, ModifyInputProps>> {
@@ -29,7 +30,7 @@ if (!Astro.props.disabled && method === 'POST' && (await validateFrom(Astro))) {
     await validateFormInput(Astro, bind);
 }
 
-const { as: asComponent = 'input', props: componentProps, type = 'text', pattern, ...props } = Astro.props;
+const { as: asComponent = 'input', props: componentProps, type = 'text', onEnterClick, pattern, ...props } = Astro.props;
 const castProps = caseTypes(type);
 const inputValue = inputReturnValueAttr(Astro, bind);
 
@@ -37,6 +38,10 @@ const allProps = { ...props, ...inputValue, ...componentProps, pattern: pattern?
 webFormsSettings.haveFileUpload ||= allProps.type === 'file';
 
 const Component = asComponent as any;
+
+if(onEnterClick){
+    allProps.onkeypress = `__redirectEnter(event, '${onEnterClick}');${allProps.onkeypress ?? ''}`;
+}
 ---
 
 <Component {...allProps} />