Fix #3662: Dropdown add focusInputRef for React Hook Form (#3663)

primefaces · Nov 16, 2022 · 2d86876 · 2d86876
1 parent da00475
commit 2d86876
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 40 deletions.
diff --git a/components/doc/dropdown/apidoc.js b/components/doc/dropdown/apidoc.js
@@ -245,6 +245,12 @@ export function ApiDoc(props) {
                                 <td>null</td>
                                 <td>Identifier of the focusable input.</td>
                             </tr>
+                            <tr>
+                                <td>focusInputRef</td>
+                                <td>Ref</td>
+                                <td>null</td>
+                                <td>Ref of the focusable input.</td>
+                            </tr>
                             <tr>
                                 <td>showClear</td>
                                 <td>boolean</td>

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -14,7 +14,7 @@ export const Dropdown = React.memo(
         const elementRef = React.useRef(null);
         const overlayRef = React.useRef(null);
         const inputRef = React.useRef(props.inputRef);
-        const focusInputRef = React.useRef(null);
+        const focusInputRef = React.useRef(props.focusInputRef);
         const searchTimeout = React.useRef(null);
         const searchValue = React.useRef(null);
         const currentSearchChar = React.useRef(null);
@@ -590,7 +590,8 @@ export const Dropdown = React.memo(
 
         React.useEffect(() => {
             ObjectUtils.combinedRefs(inputRef, props.inputRef);
-        }, [inputRef, props.inputRef]);
+            ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
+        }, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
 
         useMountEffect(() => {
             if (props.autoFocus) {
@@ -809,6 +810,7 @@ Dropdown.defaultProps = {
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterTemplate: null,
+    focusInputRef: null,
     id: null,
     inputId: null,
     inputRef: null,

diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
-import { VirtualScrollerProps } from '../virtualscroller';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
+import { VirtualScrollerProps } from '../virtualscroller';
 
 type DropdownOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
 
@@ -45,54 +45,56 @@ interface DropdownFilterOptions {
 }
 
 export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    appendTo?: DropdownAppendToType;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    dataKey?: string;
+    disabled?: boolean;
+    dropdownIcon?: string;
+    editable?: boolean;
+    emptyFilterMessage?: DropdownEmptyFilterMessageType;
+    emptyMessage?: DropdownEmptyMessageType;
+    filter?: boolean;
+    filterBy?: string;
+    filterInputAutoFocus?: boolean;
+    filterLocale?: string;
+    filterMatchMode?: string;
+    filterPlaceholder?: string;
+    filterTemplate?: DropdownFilterTemplateType;
+    focusInputRef?: React.Ref<HTMLInputElement>;
     id?: string;
+    inputId?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
+    itemTemplate?: DropdownItemTemplateType;
+    maxLength?: number;
     name?: string;
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
     optionDisabled?: DropdownOptionDisabledType;
-    optionGroupLabel?: string;
     optionGroupChildren?: string;
+    optionGroupLabel?: string;
     optionGroupTemplate?: DropdownOptionGroupTemplateType;
-    valueTemplate?: DropdownValueTemplateType;
-    filterTemplate?: DropdownFilterTemplateType;
-    itemTemplate?: DropdownItemTemplateType;
-    style?: React.CSSProperties;
-    className?: string;
-    virtualScrollerOptions?: VirtualScrollerProps;
-    scrollHeight?: string;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    emptyMessage?: DropdownEmptyMessageType;
-    emptyFilterMessage?: DropdownEmptyFilterMessageType;
-    editable?: boolean;
+    optionLabel?: string;
+    optionValue?: string;
+    options?: SelectItemOptionsType;
+    panelClassName?: string;
+    panelStyle?: React.CSSProperties;
     placeholder?: string;
     required?: boolean;
-    disabled?: boolean;
-    appendTo?: DropdownAppendToType;
-    tabIndex?: number;
-    autoFocus?: boolean;
-    filterInputAutoFocus?: boolean;
     resetFilterOnHide?: boolean;
-    showFilterClear?: boolean;
-    panelClassName?: string;
-    panelStyle?: React.CSSProperties;
-    dataKey?: string;
-    inputId?: string;
+    scrollHeight?: string;
     showClear?: boolean;
-    maxLength?: number;
+    showFilterClear?: boolean;
+    showOnFocus?: boolean;
+    style?: React.CSSProperties;
+    tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
     transitionOptions?: CSSTransitionProps;
-    dropdownIcon?: string;
-    showOnFocus?: boolean;
+    value?: any;
+    valueTemplate?: DropdownValueTemplateType;
+    virtualScrollerOptions?: VirtualScrollerProps;
     onChange?(e: DropdownChangeParams): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
@@ -101,7 +103,6 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     onShow?(): void;
     onHide?(): void;
     onFilter?(e: DropdownFilterParams): void;
-    children?: React.ReactNode;
 }
 
 export declare class Dropdown extends React.Component<DropdownProps, any> {