fix(components): [rate] display abnormal when modelValue exceeds max (#23372)

* fix(components): [rate] display abnormal when modelValue exceeds max

* test(components): [rate] add test cases for modelValue exceeding max

packages/components/rate/__tests__/rate.test.tsx

@@ -172,6 +172,34 @@ describe('Rate.vue', () => {
     ).toBe(undefined)
   })
 
+  it('should clamp modelValue to max when modelValue exceeds max', () => {
+    const wrapper = mount(Rate, {
+      props: {
+        modelValue: 10,
+        max: 5,
+      },
+    })
+    const stars = wrapper.findAll('.el-rate__item')
+    expect(stars.length).toBe(5)
+    // All stars should be active since value is clamped to max (5)
+    const activeIcons = wrapper.findAll('.el-rate__icon.is-active')
+    expect(activeIcons.length).toBe(5)
+  })
+
+  it('should display correct text when modelValue exceeds max and showText is enabled', () => {
+    const wrapper = mount(Rate, {
+      props: {
+        modelValue: 10,
+        max: 5,
+        showText: true,
+        texts: ['1', '2', '3', '4', '5'],
+      },
+    })
+    const text = wrapper.find('.el-rate__text').element
+    // When value is clamped to max (5), text should show texts[4] which is '5'
+    expect(text.textContent).toBe('5')
+  })
+
   describe('form item accessibility integration', () => {
     it('automatic id attachment', async () => {
       const wrapper = mount(() => (

packages/components/rate/src/rate.vue

@@ -120,7 +120,7 @@ const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
   formItemContext,
 })
 
-const currentValue = ref(props.modelValue)
+const currentValue = ref(clamp(props.modelValue, 0, props.max))
 const hoverIndex = ref(-1)
 const pointerAtLeftHalf = ref(true)
 
@@ -301,14 +301,14 @@ function resetCurrentValue() {
   if (props.allowHalf) {
     pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)
   }
-  currentValue.value = props.modelValue
+  currentValue.value = clamp(props.modelValue, 0, props.max)
   hoverIndex.value = -1
 }
 
 watch(
   () => props.modelValue,
   (val) => {
-    currentValue.value = val
+    currentValue.value = clamp(val, 0, props.max)
     pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)
   }
 )