fix(VOtpInput): form data support (#17955)

vuetifyjs · Aug 8, 2023 · 75aeb85 · 75aeb85
1 parent 0b3c47f
commit 75aeb85
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/vuetify/src/labs/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/labs/VOtpInput/VOtpInput.tsx
@@ -15,7 +15,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref, watch } from 'vue'
-import { focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from '@/util'
+import { filterInputAttrs, focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -78,7 +78,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     'update:modelValue': (val: string) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { attrs, emit, slots }) {
     const { dimensionStyles } = useDimension(props)
     const { isFocused, focus, blur } = useFocus(props)
     const model = useProxiedModel(
@@ -202,6 +202,8 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     })
 
     useRender(() => {
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
+
       return (
         <div
           class={[
@@ -214,6 +216,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
           style={[
             props.style,
           ]}
+          { ...rootAttrs }
         >
           <div
             ref={ contentRef }
@@ -263,6 +266,13 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
               </>
             ))}
 
+            <input
+              class="v-otp-input-input"
+              type="hidden"
+              { ...inputAttrs }
+              value={ model.value.join('') }
+            />
+
             <VOverlay
               contained
               content-class="v-otp-input__loader"