feat(input): redirect onEnter to a button

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>

packages/forms/src/components/WebForms.astro

@@ -1,23 +1,23 @@
 ---
-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,
         store: {},
     },
 };
 
-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>

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,14 +30,18 @@ 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);
 
 const allProps = { ...props, ...inputValue, ...componentProps, pattern: pattern?.toString(), ...castProps };
 webFormsSettings.haveFileUpload ||= allProps.type === 'file';
 
 const Component = asComponent as any;
+
+if(onEnterClick){
+    allProps.onkeypress = `__redirectEnter(event, '${onEnterClick}');${allProps.onkeypress ?? ''}`;
+}
 ---
 
 <Component {...allProps} />