Fix #3575: InputTextArea add KeyFilter (#3576)

primefaces · Nov 4, 2022 · 8fe20c0 · 8fe20c0
1 parent d9fb043
commit 8fe20c0
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 290 deletions.
diff --git a/components/doc/inputtextarea/apidoc.js b/components/doc/inputtextarea/apidoc.js
@@ -26,6 +26,12 @@ export function ApiDoc(props) {
                             <td>false</td>
                             <td>When present, height of textarea changes as being typed.</td>
                         </tr>
+                        <tr>
+                            <td>keyfilter</td>
+                            <td>string/regex</td>
+                            <td>null</td>
+                            <td>Format definition of the keys to block.</td>
+                        </tr>
                         <tr>
                             <td>tooltip</td>
                             <td>any</td>

diff --git a/components/doc/inputtextarea/index.js b/components/doc/inputtextarea/index.js
diff --git a/components/doc/inputtextarea/keyfilterdoc.js b/components/doc/inputtextarea/keyfilterdoc.js
@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function KeyFilterDoc(props) {
+    const code = {
+        basic: `
+<InputTextarea keyfilter="int" placeholder="Integers" />
+        `,
+        javascript: `
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30}/>
+    )
+}
+        `,
+        typescript: `
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30}/>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                InputTextarea has built-in key filtering support to block certain keys, refer to <Link href="/keyfilter">keyfilter</Link> page for more information.
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
@@ -7,8 +7,8 @@ export const InputText = React.memo(
     React.forwardRef((props, ref) => {
         const elementRef = React.useRef(ref);
 
-        const onKeyPress = (event) => {
-            props.onKeyPress && props.onKeyPress(event);
+        const onKeyDown = (event) => {
+            props.onKeyDown && props.onKeyDown(event);
 
             if (props.keyfilter) {
                 KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
@@ -59,7 +59,7 @@ export const InputText = React.memo(
 
         return (
             <>
-                <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyPress={onKeyPress} onPaste={onPaste} />
+                <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyDown={onKeyDown} onPaste={onPaste} />
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
             </>
         );
@@ -74,6 +74,6 @@ InputText.defaultProps = {
     tooltip: null,
     tooltipOptions: null,
     onInput: null,
-    onKeyPress: null,
+    onKeyDown: null,
     onPaste: null
 };