From f38558408aa85a880c679b955c6c8472fc19d969 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 21 Nov 2022 17:03:47 -0500
Subject: [PATCH] Fix #3685: TreeSelect inputRef and validation example

---
 components/doc/autocomplete/validationdoc.js  |  10 +-
 components/doc/calendar/validationdoc.js      |  10 +-
 components/doc/checkbox/validationdoc.js      |  10 +-
 components/doc/colorpicker/validationdoc.js   |  10 +-
 components/doc/dropdown/validationdoc.js      |  10 +-
 components/doc/inputmask/validationdoc.js     |  10 +-
 components/doc/inputnumber/validationdoc.js   |   8 +-
 components/doc/inputtext/validationdoc.js     |  10 +-
 components/doc/inputtextarea/validationdoc.js |  10 +-
 .../doc/multistatecheckbox/validationdoc.js   |   8 +-
 components/doc/password/validationdoc.js      |  10 +-
 components/doc/radiobutton/validationdoc.js   |  10 +-
 components/doc/treeselect/validationdoc.js    | 177 ++++++++++++++++++
 .../doc/tristatecheckbox/validationdoc.js     |  10 +-
 components/lib/treeselect/TreeSelect.js       |  72 +++----
 components/lib/treeselect/treeselect.d.ts     |  59 +++---
 pages/treeselect/index.js                     |  12 +-
 17 files changed, 317 insertions(+), 129 deletions(-)
 create mode 100644 components/doc/treeselect/validationdoc.js

diff --git a/components/doc/autocomplete/validationdoc.js b/components/doc/autocomplete/validationdoc.js
index bdd0c6442b..8815d8cd9c 100644
--- a/components/doc/autocomplete/validationdoc.js
+++ b/components/doc/autocomplete/validationdoc.js
@@ -40,9 +40,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { AutoComplete } from "primereact/autocomplete";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -89,9 +89,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { AutoComplete } from "primereact/autocomplete";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -108,7 +108,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/calendar/validationdoc.js b/components/doc/calendar/validationdoc.js
index 1209a6ff19..c97ac7bb46 100644
--- a/components/doc/calendar/validationdoc.js
+++ b/components/doc/calendar/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Calendar } from "primereact/calendar";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Calendar } from "primereact/calendar";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/checkbox/validationdoc.js b/components/doc/checkbox/validationdoc.js
index 0e4d84f9a4..130cf2cd96 100644
--- a/components/doc/checkbox/validationdoc.js
+++ b/components/doc/checkbox/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Checkbox } from "primereact/checkbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Checkbox } from "primereact/checkbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>
     };
 
diff --git a/components/doc/colorpicker/validationdoc.js b/components/doc/colorpicker/validationdoc.js
index 667c173b37..bcdc520b69 100644
--- a/components/doc/colorpicker/validationdoc.js
+++ b/components/doc/colorpicker/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { ColorPicker } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { ColorPicker } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/dropdown/validationdoc.js b/components/doc/dropdown/validationdoc.js
index d10945801c..9c8a3812b1 100644
--- a/components/doc/dropdown/validationdoc.js
+++ b/components/doc/dropdown/validationdoc.js
@@ -50,9 +50,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Dropdown } from "primereact/dropdown";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -94,9 +94,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Dropdown } from "primereact/dropdown";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -108,7 +108,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/inputmask/validationdoc.js b/components/doc/inputmask/validationdoc.js
index 96348ce055..a9289f24a2 100644
--- a/components/doc/inputmask/validationdoc.js
+++ b/components/doc/inputmask/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputMask } from "primereact/inputmask";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputMask } from "primereact/inputmask";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/inputnumber/validationdoc.js b/components/doc/inputnumber/validationdoc.js
index a633c77ec7..15d2695eca 100644
--- a/components/doc/inputnumber/validationdoc.js
+++ b/components/doc/inputnumber/validationdoc.js
@@ -68,9 +68,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputNumber } from "primereact/inputnumber";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -142,9 +142,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputNumber } from "primereact/inputnumber";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
diff --git a/components/doc/inputtext/validationdoc.js b/components/doc/inputtext/validationdoc.js
index c38e08ff75..b0abc17cfc 100644
--- a/components/doc/inputtext/validationdoc.js
+++ b/components/doc/inputtext/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputText } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputText } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/inputtextarea/validationdoc.js b/components/doc/inputtextarea/validationdoc.js
index adaf9b867d..285d22b0db 100644
--- a/components/doc/inputtextarea/validationdoc.js
+++ b/components/doc/inputtextarea/validationdoc.js
@@ -36,9 +36,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputText } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -81,9 +81,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { InputText } from "primereact/inputtext";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -96,7 +96,7 @@ export default function InvalidDemo() {
         form.reset();
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/multistatecheckbox/validationdoc.js b/components/doc/multistatecheckbox/validationdoc.js
index f73f737480..d137fe999c 100644
--- a/components/doc/multistatecheckbox/validationdoc.js
+++ b/components/doc/multistatecheckbox/validationdoc.js
@@ -41,9 +41,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { MultiStateCheckbox } from "primereact/multistatecheckbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -91,9 +91,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { MultiStateCheckbox } from "primereact/multistatecheckbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
diff --git a/components/doc/password/validationdoc.js b/components/doc/password/validationdoc.js
index 0ab337b6ee..69f0e98fb2 100644
--- a/components/doc/password/validationdoc.js
+++ b/components/doc/password/validationdoc.js
@@ -36,9 +36,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Password } from "primereact/password";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -81,9 +81,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { Password } from "primereact/password";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -96,7 +96,7 @@ export default function InvalidDemo() {
         form.reset();
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/radiobutton/validationdoc.js b/components/doc/radiobutton/validationdoc.js
index 14e4591134..fde33499fb 100644
--- a/components/doc/radiobutton/validationdoc.js
+++ b/components/doc/radiobutton/validationdoc.js
@@ -63,9 +63,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { RadioButton } from "primereact/radiobutton";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -131,9 +131,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { RadioButton } from "primereact/radiobutton";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -145,7 +145,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error">{errors[name].message}</small>
     };
 
diff --git a/components/doc/treeselect/validationdoc.js b/components/doc/treeselect/validationdoc.js
new file mode 100644
index 0000000000..f3c67d66d0
--- /dev/null
+++ b/components/doc/treeselect/validationdoc.js
@@ -0,0 +1,177 @@
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { NodeService } from '../../../service/NodeService';
+import { Button } from '../../lib/button/Button';
+import { TreeSelect } from '../../lib/treeselect/TreeSelect';
+import { classNames } from '../../lib/utils/Utils';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ValidationDoc(props) {
+    const [formData, setFormData] = useState({});
+    const [nodes, setNodes] = useState(null);
+    const defaultValues = { node: null };
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+    const nodeService = new NodeService();
+
+    useEffect(() => {
+        nodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onSubmit = (data) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name) => {
+        return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>;
+    };
+
+    const code = {
+        basic: `
+<Controller name="node"  control={form.control} rules={{ required: 'Node is required.'}}
+    render={({ field, fieldState }) => (
+        <>
+            <label htmlFor={field.name} className={classNames({ 'p-error': errors.name })}>Node*</label>
+            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" 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 { TreeSelect } from "primereact/treeselect";
+
+export default function ValidationDemo() {
+    const [formData, setFormData] = useState({});
+    const [nodes, setNodes] = useState(null);
+    const defaultValues = { node: null };
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+    const nodeService = new NodeService();
+
+    useEffect(() => {
+        nodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onSubmit = (data) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name) => {
+        return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>
+    };
+
+    return (
+        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
+            <div className="field">
+                <Controller
+                    name="node"
+                    control={form.control}
+                    rules={{ required: 'Node is required.' }}
+                    render={({ field, fieldState }) => (
+                        <>
+                            <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.node })}>
+                                Node*
+                            </label>
+                            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" 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 { TreeSelect } from "primereact/treeselect";
+import { classNames } from 'primereact/utils';
+
+export default function InvalidDemo() {
+    const [formData, setFormData] = useState<any>({});
+    const [nodes, setNodes] = useState<any[]>(null);
+    const defaultValues = { node: null };
+    const form = useForm({ defaultValues });
+    const errors = form.formState.errors;
+    const nodeService = new NodeService();
+
+    useEffect(() => {
+        nodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onSubmit = (data: any) => {
+        setFormData(data);
+    };
+
+    const getFormErrorMessage = (name) => {
+        return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>
+    };
+
+    return (
+        <form onSubmit={form.handleSubmit(onSubmit)} className="p-fluid">
+            <div className="field">
+                <Controller
+                    name="node"
+                    control={form.control}
+                    rules={{ required: 'Node is required.' }}
+                    render={({ field, fieldState }) => (
+                        <>
+                            <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.node })}>
+                                Node*
+                            </label>
+                            <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" 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="node"
+                                control={form.control}
+                                rules={{ required: 'Node is required.' }}
+                                render={({ field, fieldState }) => (
+                                    <>
+                                        <label htmlFor={field.name} className={classNames('mr-2', { 'p-error': errors.node })}>
+                                            Node*
+                                        </label>
+                                        <TreeSelect id={field.name} value={field.value} onChange={field.onChange} inputRef={field.ref} options={nodes} placeholder="Select Item" 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/doc/tristatecheckbox/validationdoc.js b/components/doc/tristatecheckbox/validationdoc.js
index 99db31eb8d..b64bdc62af 100644
--- a/components/doc/tristatecheckbox/validationdoc.js
+++ b/components/doc/tristatecheckbox/validationdoc.js
@@ -35,9 +35,9 @@ export function ValidationDoc(props) {
         javascript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { TriStateCheckbox } from "primereact/tristatecheckbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function ValidationDemo() {
     const [formData, setFormData] = useState({});
@@ -79,9 +79,9 @@ export default function ValidationDemo() {
         typescript: `
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button } from '../../lib/button/Button';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 import { TriStateCheckbox } from "primereact/tristatecheckbox";
-import { classNames } from '../../lib/utils/Utils';
 
 export default function InvalidDemo() {
     const [formData, setFormData] = useState<any>({});
@@ -93,7 +93,7 @@ export default function InvalidDemo() {
         setFormData(data);
     };
 
-    const getFormErrorMessage = (name) => {
+    const getFormErrorMessage = (name: string) => {
         return errors[name] && <small className="p-error ml-2">{errors[name].message}</small>
     };
 
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 4e0a61d6e4..f2e7a01276 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -16,7 +16,7 @@ export const TreeSelect = React.memo(
         const elementRef = React.useRef(null);
         const overlayRef = React.useRef(null);
         const filterInputRef = React.useRef(null);
-        const focusInputRef = React.useRef(null);
+        const focusInputRef = React.useRef(props.inputRef);
         const triggerRef = React.useRef(null);
         const selfChange = React.useRef(null);
         const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
@@ -299,6 +299,10 @@ export const TreeSelect = React.memo(
             getElement: () => elementRef.current
         }));
 
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(focusInputRef, props.inputRef);
+        }, [focusInputRef, props.inputRef]);
+
         useMountEffect(() => {
             updateTreeState();
         });
@@ -531,7 +535,7 @@ export const TreeSelect = React.memo(
         const footer = createFooter();
 
         return (
-            <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps} onClick={onClick}>
+            <div ref={elementRef} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 {keyboardHelper}
                 {labelElement}
                 {dropdownIcon}
@@ -561,47 +565,47 @@ export const TreeSelect = React.memo(
 TreeSelect.displayName = 'TreeSelect';
 TreeSelect.defaultProps = {
     __TYPE: 'TreeSelect',
-    id: null,
-    value: null,
-    name: null,
-    style: null,
-    className: null,
-    disabled: false,
-    options: null,
-    scrollHeight: '400px',
-    placeholder: null,
-    tabIndex: null,
-    inputId: null,
+    appendTo: null,
     ariaLabel: null,
     ariaLabelledBy: null,
-    selectionMode: 'single',
-    expandedKeys: null,
-    panelStyle: null,
-    panelClassName: null,
-    appendTo: null,
-    emptyMessage: null,
+    className: null,
+    disabled: false,
     display: 'comma',
-    metaKeySelection: true,
-    valueTemplate: null,
-    panelHeaderTemplate: null,
-    panelFooterTemplate: null,
-    transitionOptions: null,
     dropdownIcon: 'pi pi-chevron-down',
+    emptyMessage: null,
+    expandedKeys: null,
     filter: false,
-    filterTemplate: null,
-    filterValue: null,
     filterBy: 'label',
+    filterInputAutoFocus: true,
+    filterLocale: undefined,
     filterMode: 'lenient',
     filterPlaceholder: null,
-    filterLocale: undefined,
-    filterInputAutoFocus: true,
-    resetFilterOnHide: false,
-    onShow: null,
-    onHide: null,
+    filterTemplate: null,
+    filterValue: null,
+    inputId: null,
+    inputRef: null,
+    metaKeySelection: true,
+    name: null,
     onChange: null,
+    onFilterValueChange: null,
+    onHide: null,
+    onNodeCollapse: null,
+    onNodeExpand: null,
     onNodeSelect: null,
     onNodeUnselect: null,
-    onNodeExpand: null,
-    onNodeCollapse: null,
-    onFilterValueChange: null
+    onShow: null,
+    options: null,
+    panelClassName: null,
+    panelFooterTemplate: null,
+    panelHeaderTemplate: null,
+    panelStyle: null,
+    placeholder: null,
+    resetFilterOnHide: false,
+    scrollHeight: '400px',
+    selectionMode: 'single',
+    style: null,
+    tabIndex: null,
+    transitionOptions: null,
+    value: null,
+    valueTemplate: null
 };
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 81aeea0500..dddafd6807 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -81,47 +81,48 @@ interface TreeSelectFilterOptions {
 }
 
 export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
-    value?: TreeSelectSelectionKeys;
-    name?: string;
-    disabled?: boolean;
-    options?: TreeNode[];
-    scrollHeight?: string;
-    placeholder?: string;
-    inputId?: string;
+    appendTo?: TreeSelectAppendToType;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    selectionMode?: TreeSelectSelectionModeType;
-    panelStyle?: React.CSSProperties;
-    panelClassName?: string;
-    appendTo?: TreeSelectAppendToType;
-    emptyMessage?: string;
-    expandedKeys?: TreeSelectExpandedKeysType;
+    children?: React.ReactNode;
+    disabled?: boolean;
     display?: TreeSelectDisplayType;
-    metaKeySelection?: boolean;
-    valueTemplate?: TreeSelectValueTemplateType;
-    panelHeaderTemplate?: TreeSelectPanelHeaderTemplateType;
-    panelFooterTemplate?: TreeSelectPanelFooterTemplateType;
-    filterTemplate?: TreeSelectFilterTemplateType;
-    transitionOptions?: CSSTransitionProps;
     dropdownIcon?: string;
+    emptyMessage?: string;
+    expandedKeys?: TreeSelectExpandedKeysType;
     filter?: boolean;
-    filterValue?: string;
     filterBy?: string;
+    filterInputAutoFocus?: boolean;
+    filterLocale?: string;
     filterMode?: TreeSelectFilterModeType;
     filterPlaceholder?: string;
-    filterLocale?: string;
-    filterInputAutoFocus?: boolean;
+    filterTemplate?: TreeSelectFilterTemplateType;
+    filterValue?: string;
+    inputId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    metaKeySelection?: boolean;
+    name?: string;
+    options?: TreeNode[];
+    panelClassName?: string;
+    panelFooterTemplate?: TreeSelectPanelFooterTemplateType;
+    panelHeaderTemplate?: TreeSelectPanelHeaderTemplateType;
+    panelStyle?: React.CSSProperties;
+    placeholder?: string;
     resetFilterOnHide?: boolean;
-    onShow?(): void;
-    onHide?(): void;
+    scrollHeight?: string;
+    selectionMode?: TreeSelectSelectionModeType;
+    transitionOptions?: CSSTransitionProps;
+    value?: TreeSelectSelectionKeys;
+    valueTemplate?: TreeSelectValueTemplateType;
     onChange?(e: TreeSelectChangeParams): void;
-    onToggle?(e: TreeSelectExpandedParams): void;
+    onFilterValueChange?(e: TreeSelectFilterValueChangeParams): void;
+    onHide?(): void;
+    onNodeCollapse?(e: TreeSelectEventNodeParams): void;
+    onNodeExpand?(e: TreeSelectEventNodeParams): void;
     onNodeSelect?(e: TreeSelectEventNodeParams): void;
     onNodeUnselect?(e: TreeSelectEventNodeParams): void;
-    onNodeExpand?(e: TreeSelectEventNodeParams): void;
-    onNodeCollapse?(e: TreeSelectEventNodeParams): void;
-    onFilterValueChange?(e: TreeSelectFilterValueChangeParams): void;
-    children?: React.ReactNode;
+    onShow?(): void;
+    onToggle?(e: TreeSelectExpandedParams): void;
 }
 
 export declare class TreeSelect extends React.Component<TreeSelectProps, any> {
diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js
index f5a31b08ba..0560227e1e 100644
--- a/pages/treeselect/index.js
+++ b/pages/treeselect/index.js
@@ -1,14 +1,15 @@
 import Head from 'next/head';
 import { DocActions } from '../../components/doc/common/docactions';
-import { DocSections } from '../../components/doc/common/docsections';
 import { DocSectionNav } from '../../components/doc/common/docsectionnav';
+import { DocSections } from '../../components/doc/common/docsections';
+import { ApiDoc } from '../../components/doc/treeselect/apidoc';
 import { BasicDoc } from '../../components/doc/treeselect/basicdoc';
-import { MultipleDoc } from '../../components/doc/treeselect/multipledoc';
 import { CheckDoc } from '../../components/doc/treeselect/checkdoc';
 import { FilterDoc } from '../../components/doc/treeselect/filterdoc';
 import { InitialDoc } from '../../components/doc/treeselect/initialdoc';
+import { MultipleDoc } from '../../components/doc/treeselect/multipledoc';
 import { ProgrammaticDoc } from '../../components/doc/treeselect/programmaticdoc';
-import { ApiDoc } from '../../components/doc/treeselect/apidoc';
+import { ValidationDoc } from '../../components/doc/treeselect/validationdoc';
 
 const TreeSelectDemo = () => {
     const docs = [
@@ -42,6 +43,11 @@ const TreeSelectDemo = () => {
             label: 'Programmatic Control',
             component: ProgrammaticDoc
         },
+        {
+            id: 'validation',
+            label: 'Validation',
+            component: ValidationDoc
+        },
         {
             id: 'api',
             label: 'API',