feat: Spellcheck property for the input widget (#8496)

* feat: Spellcheck property for the input widget

-- Add a new widget boolean property, isSpellCheck
-- Add the corresponding Cypress test cases

* feat: Spellcheck property for the input widget

-- Place isSpellCheck property just after autoFocus property
This commit is contained in:
Paul Li 2021-11-12 15:34:10 +08:00 committed by GitHub
parent 8474806aad
commit d700b62ac5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 0 deletions

View File

@ -79,6 +79,27 @@ describe("Input Widget Functionality", function() {
.should("contain", this.data.placeholder);
cy.get(publish.backToEditor).click({ force: true });
});
it("isSpellCheck: true", function() {
cy.openPropertyPane("inputwidget");
cy.togglebar(commonlocators.spellCheck + " " + "input");
cy.PublishtheApp();
cy.get(publish.inputWidget + " " + "input")
.invoke("attr", "spellcheck")
.should("eq", "true");
cy.get(publish.backToEditor).click({ force: true });
});
it("isSpellCheck: false", function() {
cy.openPropertyPane("inputwidget");
cy.togglebarDisable(commonlocators.spellCheck + " " + "input");
cy.PublishtheApp();
cy.get(publish.inputWidget + " " + "input")
.invoke("attr", "spellcheck")
.should("eq", "false");
cy.get(publish.backToEditor).click({ force: true });
});
it("Input Widget Functionality To Check Disabled Widget", function() {
cy.openPropertyPane("inputwidget");
cy.togglebar(commonlocators.Disablejs + " " + "input");

View File

@ -39,6 +39,7 @@
"onDateSelectedField": ".t--property-control-ondateselected",
"TableRow": ".t--draggable-tablewidget .tbody",
"Disablejs": ".t--property-control-disabled",
"spellCheck": ".t--property-control-spellcheck",
"requiredjs": ".t--property-control-required",
"allowScroll": ".t--property-control-allowscroll input",
"tableInner": ".t--draggable-tablewidget span.t--widget-name",

View File

@ -521,6 +521,7 @@ class InputComponent extends React.Component<
undefined
)
}
spellCheck={this.props.spellCheck}
type={this.getType(this.props.inputType)}
value={this.props.value}
/>
@ -621,6 +622,7 @@ export interface InputComponentProps extends ComponentProps {
currencyCountryCode?: string;
noOfDecimals?: number;
phoneNumberCountryCode?: string;
spellCheck: boolean;
allowCurrencyChange?: boolean;
decimalsInCurrency?: number;
label: string;

View File

@ -354,6 +354,21 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
{
propertyName: "isSpellCheck",
label: "Spellcheck",
helpText:
"Defines whether the text input may be checked for spelling errors",
controlType: "SWITCH",
isJSConvertible: false,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
hidden: (props: InputWidgetProps) => {
return props.inputType !== InputTypes.TEXT;
},
dependencies: ["inputType"],
},
],
},
{
@ -744,6 +759,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
phoneNumberCountryCode={phoneNumberCountryCode}
placeholder={this.props.placeholderText}
showError={!!this.props.isFocused}
spellCheck={!!this.props.isSpellCheck}
stepSize={1}
tooltip={this.props.tooltip}
value={value}