chore: Don't allow paste if input type is number and pasted text is not (#33845)

Fixes #33080

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9300922932>
> Commit: fc768c03c81d4fe8371c2f708535c3a1194e6073
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9300922932&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
This commit is contained in:
Pawan Kumar 2024-05-30 17:28:05 +05:30 committed by GitHub
parent 8eed4b589f
commit ded2aeb8ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 0 deletions

View File

@ -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}

View File

@ -14,4 +14,5 @@ export interface InputComponentProps extends BaseInputComponentProps {
autoComplete?: string;
iconAlign?: "left" | "right";
iconName?: IconProps["name"];
onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
}

View File

@ -202,6 +202,16 @@ class WDSInputWidget extends WDSBaseInputWidget<InputWidgetProps, WidgetState> {
);
};
onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
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<InputWidgetProps, WidgetState> {
minNum={this.props.minNum}
onFocusChange={this.onFocusChange}
onKeyDown={this.onKeyDown}
onPaste={this.onPaste}
onValueChange={this.onValueChange}
placeholder={this.props.placeholderText}
spellCheck={this.props.isSpellCheck}