Skip to content

Commit

Permalink
fix(Form): fix Form scrollToFirstError bug (#3251)
Browse files Browse the repository at this point in the history 
* fix(Form): fix form-item class name and scrollToFirstError get form-item class name

* fix(Form): fix form-item class name and scrollToFirstError get form-item class name

* fix(Form): test update

---------

Co-authored-by: v-tangchenw <v-tangchenw.gd@chinatelecom.cn>
  • Loading branch information
@morningbao @uyarn
2 people authored and uyarn committed Aug 15, 2024
1 parent 00cb1d3 commit f31c1d1
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 43 deletions.
7 changes: 6 additions & 1 deletion src/form/form-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ export interface FormItemConstructor extends Vue {
form: FormInstance;
}

export function getFormItemClassName(componentName: string, name?: string) {
if (!name) return '';
return `${componentName}-item__${name}`.replace(/(\[|\]\.|'|")/g, '_');
}

export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('form'), getGlobalIconMixins()).extend({
name: 'TFormItem',

Expand Down Expand Up @@ -89,7 +94,7 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
classes(): ClassName {
return [
`${this.componentName}__item`,
`${this.componentName}-item__${this.name || ''}`,
getFormItemClassName(this.componentName, this.name),
{
[`${this.componentName}__item-with-help`]: this.help,
[`${this.componentName}__item-with-extra`]: this.extraNode,
Expand Down
4 changes: 2 additions & 2 deletions src/form/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import props from './props';
import { FORM_CONTROL_COMPONENTS } from './const';
import { emitEvent } from '../utils/event';
import FormItem, { FormItemValidateResult } from './form-item';
import FormItem, { FormItemValidateResult, getFormItemClassName } from './form-item';
import { FormResetEvent, FormSubmitEvent, ClassName } from '../common';
import { getClassPrefixMixins } from '../config-provider/config-receiver';
import mixins from '../utils/mixins';
Expand Down Expand Up @@ -75,7 +75,7 @@ export default mixins(classPrefixMixins).extend({
if (r === true) return;
const [firstKey] = Object.keys(r);
if (this.scrollToFirstError) {
this.scrollTo(`.${this.componentName}-item__${firstKey}`);
this.scrollTo(`.${getFormItemClassName(this.componentName, firstKey)}`);
}
return r[firstKey][0].message;
},
Expand Down
52 changes: 26 additions & 26 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16518,7 +16518,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/value.vue 1`] = `
class="t-form t-form-inline"
>
<div
class="t-form__item t-form-item__"
class="t-form__item"
>
<div
class="t-form__label t-form__label--right"
Expand Down Expand Up @@ -16556,7 +16556,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/value.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
>
<div
class="t-form__label t-form__label--right"
Expand Down Expand Up @@ -51116,7 +51116,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/base.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-2450e2c3=""
style="margin-left: 100px;"
>
Expand Down Expand Up @@ -51704,7 +51704,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/clear-validate.vue 1`]
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-6f67d4f0=""
style="margin-left: 100px;"
>
Expand Down Expand Up @@ -51947,7 +51947,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/custom-validator.vue 1
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -52769,7 +52769,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/disabled.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -53411,7 +53411,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/error-message.vue 1`]
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-e6f62b80=""
style="margin-left: 100px;"
>
Expand Down Expand Up @@ -53754,7 +53754,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/login.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
>
<div
class="t-form__controls"
Expand Down Expand Up @@ -54008,7 +54008,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/reset.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -54399,7 +54399,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/size.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -54614,7 +54614,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[0].name"
class="t-form__item t-form-item__students_0_name"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -54656,7 +54656,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[0].courseType"
class="t-form__item t-form-item__students_0_courseType"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -54727,7 +54727,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[0].course"
class="t-form__item t-form-item__students_0_course"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -54893,7 +54893,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -54953,7 +54953,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[1].name"
class="t-form__item t-form-item__students_1_name"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -54995,7 +54995,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[1].courseType"
class="t-form__item t-form-item__students_1_courseType"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -55066,7 +55066,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__students[1].course"
class="t-form__item t-form-item__students_1_course"
>
<div
class="t-form__label t-form__label--required t-form__label--right"
Expand Down Expand Up @@ -55232,7 +55232,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-complicated-d
class="t-space-item"
>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -55430,7 +55430,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validate-message.vue 1
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 100px;"
>
<div
Expand Down Expand Up @@ -56244,7 +56244,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validator.vue 1`] = `
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-064ce350=""
style="margin-left: 100px;"
>
Expand Down Expand Up @@ -56782,7 +56782,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validator-status.vue 1
</div>
</div>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-left: 80px;"
>
<div
Expand Down Expand Up @@ -65317,7 +65317,7 @@ exports[`csr snapshot test > csr test ./src/input-number/_example/status.vue 1`]
<!---->
<!---->
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-77658c68=""
>
<div
Expand Down Expand Up @@ -65403,7 +65403,7 @@ exports[`csr snapshot test > csr test ./src/input-number/_example/status.vue 1`]
data-v-77658c68=""
/>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-77658c68=""
>
<div
Expand Down Expand Up @@ -65489,7 +65489,7 @@ exports[`csr snapshot test > csr test ./src/input-number/_example/status.vue 1`]
data-v-77658c68=""
/>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-77658c68=""
>
<div
Expand Down Expand Up @@ -65575,7 +65575,7 @@ exports[`csr snapshot test > csr test ./src/input-number/_example/status.vue 1`]
data-v-77658c68=""
/>
<div
class="t-form__item t-form-item__"
class="t-form__item"
data-v-77658c68=""
>
<div
Expand Down Expand Up @@ -109619,7 +109619,7 @@ exports[`csr snapshot test > csr test ./src/timeline/_example/loading.vue 1`] =
class="t-form"
>
<div
class="t-form__item t-form-item__"
class="t-form__item"
style="margin-bottom: 5px;"
>
<div
Expand Down
28 changes: 14 additions & 14 deletions test/snap/__snapshots__/ssr.test.js.snap
View file

Large diffs are not rendered by default.

0 comments on commit f31c1d1

Please sign in to comment.