Fix primefaces#3790: SelectButton focus method

melloware · Dec 16, 2022 · e1acacb · e1acacb
1 parent 9d37860
commit e1acacb
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 7 deletions.
diff --git a/components/doc/selectbutton/validationdoc.js b/components/doc/selectbutton/validationdoc.js
@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Button } from '../../lib/button/Button';
+import { SelectButton } from '../../lib/selectbutton/SelectButton';
+import { classNames } from '../../lib/utils/Utils';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ValidationDoc(props) {
+    const options = ['Off', 'On'];
+    const [formData, setFormData] = useState({});
+    const defaultValues = { engine: '' };
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+
+    const onSubmit = (data) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name) => {
+        return errors[name] && <small className="p-error">{errors[name].message}</small>;
+    };
+
+    const code = {
+        basic: `
+<Controller name="engine" control={form.control} rules={{ required: 'Engine State is required.'}}
+    render={({ field, fieldState }) => (
+        <>
+            <label htmlFor={field.name} className={classNames({ 'p-error': errors.name })}>Engine State*</label>
+            <SelectButton id={field.name} options={options} {...field} className={classNames({ 'p-invalid': fieldState.error })} />
+            {getFormErrorMessage(field.name)}
+        </>
+    )}
+/>
+        `,
+        javascript: `
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+import { SelectButton } from "primereact/selectbutton";
+
+export default function ValidationDemo() {
+    const options = ['Off', 'On'];
+    const [formData, setFormData] = useState({});
+    const defaultValues = { engine: '' };
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+
+    const onSubmit = (data) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name) => {
+        return errors[name] && <small className="p-error">{errors[name].message}</small>
+    };
+
+    return (
+        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
+            <div className="field">
+                <Controller
+                    name="engine"
+                    control={form.control}
+                    rules={{ required: 'Engine State is required.' }}
+                    render={({ field, fieldState }) => (
+                        <>
+                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.engine })}>
+                                Engine State*
+                            </label>
+                            <SelectButton id={field.name} options={options} {...field} className={classNames({ 'p-invalid': fieldState.error })} />
+                            {getFormErrorMessage(field.name)}
+                        </>
+                    )}
+                />
+            </div>
+            <Button label="Submit" type="submit" icon="pi pi-check" />
+        </form>
+    )
+}
+        `,
+        typescript: `
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+import { SelectButton } from "primereact/selectbutton";
+
+export default function InvalidDemo() {
+    const options = ['Off', 'On'];
+    const [formData, setFormData] = useState<any>({});
+    const defaultValues = {engine: ''};
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+
+    const onSubmit = (data: any) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name: string) => {
+        return errors[name] && <small className="p-error">{errors[name].message}</small>
+    };
+
+    return (
+        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
+            <div className="field">
+                <Controller
+                    name="engine"
+                    control={form.control}
+                    rules={{ required: 'Engine State is required.' }}
+                    render={({ field, fieldState }) => (
+                        <>
+                            <label htmlFor={field.name} className={classNames({ 'p-error': errors.engine })}>
+                                Engine State*
+                            </label>
+                            <SelectButton id={field.name} options={options} {...field} className={classNames({ 'p-invalid': fieldState.error })} />
+                            {getFormErrorMessage(field.name)}
+                        </>
+                    )}
+                />
+            </div>
+            <Button label="Submit" type="submit" icon="pi pi-check" />
+        </form>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <a href="https://react-hook-form.com/">React Hook Form</a> is the most popular React library for form validation. The field will be highlighted and receive focus on validation failure.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-column gap-2">
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
+                        <div className="field">
+                            <Controller
+                                name="engine"
+                                control={form.control}
+                                rules={{ required: 'Engine State is required.' }}
+                                render={({ field, fieldState }) => (
+                                    <>
+                                        <label htmlFor={field.name} className={classNames({ 'p-error': errors.engine })}>
+                                            Engine State*
+                                        </label>
+                                        <SelectButton id={field.name} options={options} {...field} className={classNames({ 'p-invalid': fieldState.error })} />
+                                        {getFormErrorMessage(field.name)}
+                                    </>
+                                )}
+                            />
+                        </div>
+                        <Button label="Submit" type="submit" icon="pi pi-check" />
+                    </form>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { SelectButtonItem } from './SelectButtonItem';
 
 export const SelectButton = React.memo(
@@ -90,9 +90,16 @@ export const SelectButton = React.memo(
             return null;
         };
 
+        const focus = () => {
+            const button = DomHandler.findSingle(elementRef.current, '[tabindex]:not([tabindex="-1"]):not([disabled])');
+
+            button && button.focus();
+        };
+
         React.useImperativeHandle(ref, () => ({
             props,
-            getElement: () => elementRef.current
+            getElement: () => elementRef.current,
+            focus
         }));
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);

diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 
 type SelectButtonOptionDisabledType = string | ((option: any) => boolean);
 
@@ -39,4 +39,5 @@ export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.In
 
 export declare class SelectButton extends React.Component<SelectButtonProps, any> {
     public getElement(): HTMLDivElement;
+    public focus(): void;
 }
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
@@ -1,12 +1,13 @@
 import Head from 'next/head';
+import { DocActions } from '../../components/doc/common/docactions';
 import { DocSectionNav } from '../../components/doc/common/docsectionnav';
 import { DocSections } from '../../components/doc/common/docsections';
-import { DocActions } from '../../components/doc/common/docactions';
-import { ImportDoc } from '../../components/doc/selectbutton/importdoc';
+import { ApiDoc } from '../../components/doc/selectbutton/apidoc';
 import { BasicDoc } from '../../components/doc/selectbutton/basicdoc';
-import { MultipleSelectionDoc } from '../../components/doc/selectbutton/multipleselectiondoc';
 import { CustomContentDoc } from '../../components/doc/selectbutton/customcontentdoc';
-import { ApiDoc } from '../../components/doc/selectbutton/apidoc';
+import { ImportDoc } from '../../components/doc/selectbutton/importdoc';
+import { MultipleSelectionDoc } from '../../components/doc/selectbutton/multipleselectiondoc';
+import { ValidationDoc } from '../../components/doc/selectbutton/validationdoc';
 
 const SelectButtonDemo = () => {
     const docs = [
@@ -30,6 +31,11 @@ const SelectButtonDemo = () => {
             label: 'Custom Content',
             component: CustomContentDoc
         },
+        {
+            id: 'validation',
+            label: 'Validation',
+            component: ValidationDoc
+        },
         {
             id: 'api',
             label: 'API',