Skip to content

Commit

Permalink
Merge pull request #7751 from surveyjs/bug/7748-other-comment-textupd…
Browse files Browse the repository at this point in the history 
…atemode

Fix issues with onTyping/Blur for other/question comments in react/knockout #7748
  • Loading branch information
@OlgaLarina
OlgaLarina authored Jan 29, 2024
2 parents 590b277 + 96b60d3 commit 04aa55b
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 25 deletions.
4 changes: 2 additions & 2 deletions src/knockout/templates/comment.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script type="text/html" id="survey-comment">
<!--ko if: !question.isReadOnlyRenderDiv() -->
<textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), 'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, placeholder: question.renderedCommentPlaceholder },
event: { input: function(s, e) { $data.question.onCommentInput(s, e); } },
event: { input: function(s, e) { $data.question.onCommentInput(e); } },
value: $data.question.comment,
visible: $data.visible,
disable: $data.question.isInputReadOnly,
Expand All @@ -16,7 +16,7 @@
<script type="text/html" id="survey-other">
<!--ko if: !question.isReadOnlyRenderDiv() -->
<textarea data-bind="attr: { id: question.otherId, maxLength: question.getOthersMaxLength(), 'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, placeholder: question.otherPlaceholder },
event: { input: function(s, e) { $data.question.onOtherValueInput(s, e); } },
event: { input: function(s, e) { $data.question.onOtherValueInput(e); } },
value: $data.question.otherValue,
visible: $data.visible,
disable: $data.question.isInputReadOnly,
Expand Down
52 changes: 29 additions & 23 deletions src/react/reactquestion_comment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
super(props);
}
protected renderElement(): JSX.Element {
var onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
var onInput = (event: any) => {
const onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
const onInput = (event: any) => {
if (this.question.isInputTextUpdate) {
this.updateValueOnEvent(event);
} else {
Expand Down Expand Up @@ -54,18 +54,33 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
}

export class SurveyQuestionCommentItem extends ReactSurveyElement {
private getStateComment() {
const comment = this.getComment();
let stateComment: string = this.state.comment;
if (stateComment !== undefined && stateComment.trim() !== comment) {
stateComment = comment;
}
return stateComment !== undefined ? stateComment : comment || "";
}
private control: HTMLElement;
constructor(props: any) {
super(props);
this.state = { comment: this.getComment() || "" };
}
componentDidUpdate(prevProps: any, prevState: any): void {
super.componentDidUpdate(prevProps, prevState);
this.updateDomElement();
}
componentDidMount(): void {
super.componentDidMount();
this.updateDomElement();
}
protected updateDomElement(): void {
if (!!this.control) {
const control: any = this.control;
const newValue = this.getComment() || "";
if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
control.value = newValue;
}
}
}
protected setControl(element: HTMLElement | null): void {
if(!!element) {
this.control = element;
}
}
protected canRender(): boolean {
return !!this.props.question;
}
Expand All @@ -88,30 +103,21 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
return this.props.question.renderedCommentPlaceholder;
}
protected renderElement(): JSX.Element {
let question = this.props.question;
const question = this.props.question;
let className = this.props.otherCss || this.cssClasses.comment;
let handleOnChange = (event: any) => {
this.setState({ comment: event.target.value });
// https://github.com/surveyjs/survey-library/issues/7252
if (!Helpers.isTwoValueEquals(this.getComment(), event.target.value, false, true, false)) {
this.setComment(event.target.value);
}
};
let comment = this.getStateComment();

if (question.isReadOnlyRenderDiv()) {
const comment = this.getComment() || "";
return <div>{comment}</div>;
}
return (
<textarea
id={this.getId()}
className={className}
value={comment}
ref={(textarea) => (this.setControl(textarea))}
disabled={this.isDisplayMode}
maxLength={question.getOthersMaxLength()}
placeholder={this.getPlaceholder()}
onChange={handleOnChange}
onBlur={(e) => { this.onCommentChange(e); handleOnChange(e); }}
onBlur={(e) => { this.onCommentChange(e); }}
onInput={(e) => this.onCommentInput(e)}
aria-required={question.isRequired || question.a11y_input_ariaRequired}
aria-label={question.ariaLabel || question.a11y_input_ariaLabel}
Expand Down
165 changes: 165 additions & 0 deletions testCafe/questions/radiogroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,4 +355,169 @@ frameworks.forEach(framework => {
await t
.expect(Selector(".sv-string-viewer").withText("None").count).eql(1);
});
test("otherItem type in comment, textUpdateMode=onBlur", async t => {
const setOnValueChanged = ClientFunction(() => {
window["survey"].onValueChanged.add((sender, options) => {
if(options.name === "q2") return;
const val = sender.getValue("q2");
sender.setValue("q2", val + 1);
});
});
const currentJson = {
elements: [
{
type: "radiogroup",
showOtherItem: true,
name: "q1",
choices: [
"item1",
"item2",
"item3"
]
},
{ type: "text", name: "q2", defaultValue: 0, inputType: "number" }
]
};
await initSurvey(framework, currentJson);
await setOnValueChanged();

await t.click("input[value=other]")
.click(Selector("textarea"))
.pressKey("A B C D E F tab")
.click("input[value=Complete]");

const surveyResult = await getSurveyResult();
assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 2 });
});
test("otherItem type in comment, textUpdateMode=onTyping", async t => {
const setOnValueChanged = ClientFunction(() => {
window["survey"].onValueChanged.add((sender, options) => {
if(options.name === "q2") return;
const val = sender.getValue("q2");
sender.setValue("q2", val + 1);
});
});
const currentJson = {
textUpdateMode: "onTyping",
elements: [
{
type: "radiogroup",
showOtherItem: true,
name: "q1",
choices: [
"item1",
"item2",
"item3"
]
},
{ type: "text", name: "q2", defaultValue: 0, inputType: "number" }
]
};
await initSurvey(framework, currentJson);
await setOnValueChanged();

await t.click("input[value=other]")
.click(Selector("textarea"))
.pressKey("A B C D E F tab")
.click("input[value=Complete]");

const surveyResult = await getSurveyResult();
assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 7 });
});
test("Type in comment, textUpdateMode=onBlur", async t => {
const setOnValueChanged = ClientFunction(() => {
window["survey"].onValueChanged.add((sender, options) => {
if(options.name === "q2") return;
const val = sender.getValue("q2");
sender.setValue("q2", val + 1);
});
});
const currentJson = {
elements: [
{
type: "radiogroup",
showCommentArea: true,
name: "q1",
choices: [
"item1",
"item2",
"item3"
]
},
{ type: "text", name: "q2", defaultValue: 0, inputType: "number" }
]
};
await initSurvey(framework, currentJson);
await setOnValueChanged();

await t.click(Selector("textarea"))
.pressKey("A B C D E F tab")
.click("input[value=Complete]");

const surveyResult = await getSurveyResult();
assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 1 });
});
test("Type in comment, textUpdateMode=onTyping", async t => {
const setOnValueChanged = ClientFunction(() => {
window["survey"].onValueChanged.add((sender, options) => {
if(options.name === "q2") return;
const val = sender.getValue("q2");
sender.setValue("q2", val + 1);
});
});
const currentJson = {
textUpdateMode: "onTyping",
elements: [
{
type: "radiogroup",
showCommentArea: true,
name: "q1",
choices: [
"item1",
"item2",
"item3"
]
},
{ type: "text", name: "q2", defaultValue: 0, inputType: "number" }
]
};
await initSurvey(framework, currentJson);
await setOnValueChanged();

await t.click(Selector("textarea"))
.pressKey("A B C D E F tab")
.click("input[value=Complete]");

const surveyResult = await getSurveyResult();
assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 6 });
});
test("Initial value in question comment", async t => {
const setCommentValue = ClientFunction(() => {
window["survey"].setComment("q1", "ABC");
});
const currentJson = {
elements: [
{
type: "radiogroup",
showCommentArea: true,
name: "q1",
choices: [
"item1",
"item2",
"item3"
]
}
]
};
await initSurvey(framework, currentJson);
await setCommentValue();

await t.click("input[value=item2]")
.click(Selector("textarea"))
.pressKey("end D E F")
.click("input[value=Complete]");

const surveyResult = await getSurveyResult();
assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABCDEF" });
});
});

0 comments on commit 04aa55b

Please sign in to comment.