fix(runtime-core): fix required prop check false positive for kebab-case edge cases (#12034)

close #12011

packages/runtime-core/__tests__/componentProps.spec.ts

@@ -333,6 +333,30 @@ describe('component props', () => {
     })
   })
 
+  //#12011
+  test('replace camelize with hyphenate to handle props key', () => {
+    const Comp = {
+      props: {
+        hasB4BProp: { type: Boolean, required: true },
+      },
+      setup() {
+        return () => null
+      },
+    }
+    render(
+      h('div', {}, [
+        h(Comp, {
+          'has-b-4-b-prop': true,
+        }),
+        h(Comp, {
+          'has-b4-b-prop': true,
+        }),
+      ]),
+      nodeOps.createElement('div'),
+    )
+    expect(`Missing required prop: "hasB4BProp"`).not.toHaveBeenWarned()
+  })
+
   test('warn props mutation', () => {
     let instance: ComponentInternalInstance
     let setupProps: any

packages/runtime-core/src/componentProps.ts

@@ -654,6 +654,7 @@ function validateProps(
 ) {
   const resolvedValues = toRaw(props)
   const options = instance.propsOptions[0]
+  const camelizePropsKey = Object.keys(rawProps).map(key => camelize(key))
   for (const key in options) {
     let opt = options[key]
     if (opt == null) continue
@@ -662,7 +663,7 @@ function validateProps(
       resolvedValues[key],
       opt,
       __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
-      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)),
+      !camelizePropsKey.includes(key),
     )
   }
 }