diff --git a/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx b/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx index 1aa66ff178..b09d958e8d 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx +++ b/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx @@ -105,6 +105,7 @@ function InputComponent(props: InputComponentProps) { onChange={props.onValueChange} onFocusChange={props.onFocusChange} onKeyDown={props.onKeyDown} + onPaste={props.onPaste} placeholder={props.placeholder} prefix={startIcon} spellCheck={props.spellCheck} diff --git a/app/client/src/widgets/wds/WDSInputWidget/component/types.ts b/app/client/src/widgets/wds/WDSInputWidget/component/types.ts index 62289a4a35..bd934d89c1 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/component/types.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/component/types.ts @@ -14,4 +14,5 @@ export interface InputComponentProps extends BaseInputComponentProps { autoComplete?: string; iconAlign?: "left" | "right"; iconName?: IconProps["name"]; + onPaste?: (event: React.ClipboardEvent) => void; } diff --git a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx index 9590ecc179..9de9d5da8d 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx @@ -202,6 +202,16 @@ class WDSInputWidget extends WDSBaseInputWidget { ); }; + onPaste = (e: React.ClipboardEvent) => { + if (this.props.inputType === INPUT_TYPES.NUMBER) { + const pastedValue = e.clipboardData.getData("text"); + + if (isNaN(Number(pastedValue))) { + e.preventDefault(); + } + } + }; + getWidgetView() { const { inputType, rawText } = this.props; @@ -227,6 +237,7 @@ class WDSInputWidget extends WDSBaseInputWidget { minNum={this.props.minNum} onFocusChange={this.onFocusChange} onKeyDown={this.onKeyDown} + onPaste={this.onPaste} onValueChange={this.onValueChange} placeholder={this.props.placeholderText} spellCheck={this.props.isSpellCheck}